复选框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="../jquery-1.11.2.min.js"></script>//引用jquery包 </head> <body> <input type="checkbox" id="all" />全选<br /> <input class="x" type="checkbox" value="one" />aa <input class="x" type="checkbox" value="two" />bb <input class="x" type="checkbox" value="three"/>cc <input class="x" type="checkbox" value="four" />dd <input class="x" type="checkbox" value="five" />ee <input type="button" value="测试" id="bt"/> <input type="text" id="tx" /> <input type="button" value="设置选中" id="sz" /> </body> <script type="text/javascript"> $(document).ready(function(e) {//写JQUERY代码在外层需要先加这么一句，类似一个范围要在这个范围里写代码，function（e）这里称呼为匿名函数； $("#all").click(function(){//click等同于js中的on click(),但是比较而言这个更为简洁实用 var ck=$(".x")//根据class选择 var xz=$(this)[0].checked;//$(this)代表jquery元素后面加[0]转化为了dom元素 ck.prop("checked",xz); //复选框checked在jquery中存在bug，所以用prop()替代 }) $("#bt").click(function(){ var ck=$(".x"); for(var i=0;i<ck.length;i++) { if(ck.eq(i)[0].checked) { alert(ck.eq(i).val()); } } }) $("#sz").click(function(){//这个没有运行出来查了几遍也没发现问题，明天问同学吧 var v = $("#tx").val(); var ck = $(".x"); ck.prop("checked",false); for(var i=0;i<ck.length;i++) { if(ck.eq(i).val()==v) { ck.eq(i).prop("checked",true); } } }) }); </script> </html>
练习