Html代码:
<input type="checkbox" id="all">全选 <input type="checkbox" id="reverse">反选 <input type="checkbox" id="getvalue">获得选中的所有值 <p><input type="checkbox" value="1">1</p> <p><input type="checkbox" value="2">2</p> <p><input type="checkbox" value="3">3</p> <p><input type="checkbox" value="4">4</p> <p><input type="checkbox" value="5">5</p> <p><input type="checkbox" value="6">6</p>
JQuery代码:
$(function(){
$("#all").click(function(){
$("p input").prop("checked",$(this).prop("checked"));
});
$("#reverse").click(function(){
$("p input").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
});
$("#getvalue").click(function(){
var arr=new Array();
$("p input").each(function(){
if($(this).prop("checked")){
arr.push($(this).val());
}
});
alert(arr.join(","));
});
});代码说明:
1、当点击全选的时候,把p标签里面所有的checkbox标签的checked属性修改为和当前标签相同的值(当前选中就全部选中(true),当前不选就全部不选(false))。
2、当点击反选的时候,因为要挨个设置,所以不能统一的设置成一个值,要循环p标签下面所有的checkbox标签,然后单独设置每一个checkbox,把每一个checkbox的checked属性都设置成和原来的值相反的值(true改为false,false改为true)。
3、获取值也需要循环所有的checkbox标签,然后通过val()方法获取checkbox的值并放到一个数组中,最后统一输出。

0条评论
点击登录参与评论