多选框的全选与取消

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

    $(function(){

        var checkbox = $(‘input[name=checkbox]‘);

        $(‘.selectAll‘).on("click",function(){

            checkbox.prop(‘checked‘, this.checked);

        });

        checkbox.on("click",function(){

            var _tmp = checkbox;

            $(".selectAll").prop(‘checked‘,_tmp.length == _tmp.filter(":checked").length);

        });

        //或者使用下述方法

        // checkbox.on("click",function(){

        //  var flag = true;

        //  checkbox.each(function(){

        //      if (!this.checked) {

        //          flag = false;

        //      };

        //  })

        //  if (flag) {

        //      $(‘.selectAll‘).prop(‘checked‘, true)

        //  }else{

        //      $(‘.selectAll‘).prop(‘checked‘, false)

        //  }

        // })

    })

    </script>

</head>

<body>

    <input type="checkbox" class="selectAll">全选/全不选<br/>

    <input type="checkbox" name="checkbox" /><br/>

    <input type="checkbox" name="checkbox" /><br/>

    <input type="checkbox" name="checkbox" /><br/>

    <input type="checkbox" name="checkbox" /><br/>

    <input type="checkbox" name="checkbox" /><br/>

    <input type="checkbox" name="checkbox" /><br/>

</body>

</html>

时间： 2024-10-10 09:14:04

多选框的全选与取消的相关文章

如何实现复选框的全选和取消全选效果

如何实现复选框的全选和取消全选效果:在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

JS如何实现对name是数组的复选框的全选和反选以及取消选择

JS如何实现对name是数组的复选框的全选和反选以及取消选择? form内容如下: 因为PHP接收要用 数组形式的 复选框,正常情况下 JQ可如果是这种 直接使用 $("input[name=ptpt])即可.但是这种php接收的只是最后一个值,字符串.<label><input type='checkbox' name='ptpt' value='a1' />a1</label><label><input type='checkbox' n

JavaScript - 复选框的全选和取消

复选框的全选和取消 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

复选框与全选框的选中状态的联动

类似在网购时在购物车选择商品时的复选框与全选框的联动事件 对于原型,构造函数之类的还不熟,强行用了一波,结果写得又长又臭. 但总算功能还是做出来了,总要多实践才会变熟的.全部代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=

vue中使用计算属性巧妙的实现多选框的“全选”

接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 根据上图可以发现,购物车中的每一件商品都有一个选择框,而这个选择框则是需要用一个布尔字段,通过v-model绑定进去,监听该条购物车记录的选中状态. 首先,沟通后端,为前端预留一个select属性 该属性默认设置为false,因为购物车在被渲染出来时,默认是应该没有勾选任何一件商品的 然后,绑定到

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

多选框的全选、全不选、反选

要实现多选框的选择相关映射,要实现以下逻辑: 1.全选框被点击时,所以子选框被选中. 2.当全选状态下,子选框的其中一个撤销点击,全选框自动unchecked 3.为全选状态下,子选框一个个全部选中,最后一个子选框框点击之后,全选框自动checked var information=$("#"+flag).find(".information");  var $newsCheck = information.find("input[name='newsCh

复选框的全选(引自锋利的jQuery)

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta name="generator" content="text/html" charset="utf-8" /> 5 <title>复选框组的全选/非全选</title> 6 <script

js实现复选框的全选、全不选、反选

js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org