1. 程式人生 > >jquery全選、反選、全不選代碼

jquery全選、反選、全不選代碼

遍歷 clas class html box isa each nbsp not

1、JS代碼

function ($) {

//全選 反選 全不選

$("#selAll").click(function () {

$(".lists :checkbox").not(‘:disabled‘).prop("checked", true);

});

$("#unSelAll").click(function () {

$(".lists :checkbox").not(‘:disabled‘).prop("checked", false);

});

$("#reverSel").click(function () {

//遍歷.lists下的 checkbox;

$(".lists :checkbox").not(‘:disabled‘).each(function () {

$(this).prop("checked", !$(this).prop("checked"));

});

});

}(jQuery)

2、HTML代碼

<input class="btn btn-default" id="selAll" type="button" value="全選" />

<input class="btn btn-default" id="unSelAll" type="button" value="全不選" />

<input class="btn btn-default" id="reverSel" type="button" value="反選" />

<div class="lists">

<input type="checkbox" value="1" /> 蘋果

<input type="checkbox" value="2" /> 香蕉

<input type="checkbox" value="3" /> 菠蘿

<input type="checkbox" value="4" /> 桃子

</div>

來自: http://mp.weixin.qq.com/s/XDMtbbvwwIOMRgZxk_cdmQ

jquery全選、反選、全不選代碼