利用jQuery实现CheckBox全选/全不选/反选

html 代码

<input type="checkbox"  class='item'>苹果</br>
<input type="checkbox"  class='item'>梨子</br>
<input type="checkbox"  class='item'>香蕉</br>
<input type="checkbox"  class='item'>菠萝</br>
<input type="checkbox"  class='item'>芒果</br>
<input type="checkbox"  id='all'>全选/全不选</br>

js 代码( 注意引入 jquery.js )

//全选和全不选
$("#all").click(function()
{
     //item 和 all 保持一致
     $(".item").prop("checked",$(this).prop("checked"));
});

//点击 item 元素时,全选框的变化
$(document).on("click",".item",function()
{
     // 判断 checkbox 被选个数 是否 等于 checkbox 个数
     var flag = $(".item:checked").length==$(".item").length;
     $("#all").prop("checked",flag);
});

 

转载于:https://www.cnblogs.com/fangwu/p/8206055.html