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条评论
点击登录参与评论