您的位置:首页 > 其它

JQurey复选框全选/反选

2016-12-19 12:00 197 查看


HTML布局

<form action="">
<input type="checkbox" name="items" value="篮球">篮球</input>
<input type="checkbox" name="items" value="足球">足球</input>
<input type="checkbox" name="items" value="排球">排球</input>
<input type="checkbox" name="items" value="网球">网球</input>
<br/>
<input id="selectAll" type="button" value="全选"/>
<input id="selectAllNo" type="button" value="全不选"/>
<input id="invers" type="button" value="反选"/>
<input id="submit" type="button" value="提交"/>
</form>


JS

$(function(){
//获取名称为items的所有checkbox
var checkboxList = $('[name=items]:checkbox')
//全选操作
$("#selectAll").click(function(){

checkboxList.attr('checked','true');

});
//全不选
$("#selectAllNo").click(function(){

checkboxList.attr('checked','false');

});
//反选
$("#invers").click(function(){

checkboxList.each(function(){
this.checked = !this.checked;
});

});
//提交选项
$("#submit").click(function(){

var checkedArr = new Array();

checkboxList.each(function(){

if(this.checked == true){
checkedArr.push(this.value);
}
});
alert(checkedArr.join('-'));
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jqurey checkbox