| 标题 | jquery对checkbox操作实例大全 |
| 内容 | jquery对checkbox操作实例大全，包括对checkbox的全选、反选、全部选、取值、取页面显示值等功能，具体看下面jquery对checkbox操作实例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>全选全不选反选取值</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="script/jquery-1.4.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#selAll").click(function () { //":checked"匹配所有的复选框 $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中 }); $("#unselAll").click(function () { $("#div1 :checkbox").attr("checked", false); }); //理解用迭代原理each（function(){}） $("#reverse").click(function () { $("#div1 :checkbox").each(function () { $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态：如果选中则取反 }); }); $("#submit").click(function (){ var items= $("input:checkbox:checked"); if (items>0) { alert("您选中了"+items.length+"个项目"); var checked=[]; $("input:checkbox:checked").val(); $("input:checkbox:checked").each(function() { console.log("---",$(this)); // checked.push($(this).attr("value"));//获取value值 checked.push($(this).next().text());//获取显示文本的值 }); alert(checked); }else{ alert("您还没选择！"); } }); }); </script> </head> <body> <div id="div1"> <input type="checkbox" /><label>歌曲1</label><br /> <input type="checkbox" /><label>歌曲2</label><br /> <input type="checkbox" /><label>歌曲3</label><br /> <input type="checkbox" /><label>歌曲4</label><br /> <input type="checkbox" /><label>歌曲5</label><br /> <input type="checkbox" /><label>歌曲6</label><br /> <input type="checkbox" /><label>歌曲7</label><br /> <input type="button" id="selAll" value="全选" /> <input type="button" id="unselAll" value="全不选" /> <input type="button" id="reverse" value="反选 " /> <input type="button" id="submit" value="提交"/> </div> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。