jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)
2013-04-27 23:05
471 查看
ylbtech-jQuery:jQuery学习 |
jQuery语法实例
复选框应用 效果截图jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)HTML代码返回顶部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //1,全选 $("#checkedAll").click(function () { $("[name=items]:checkbox").attr('checked', true); }); //2,全不选 $("#checkedNo").click(function () { $("[name=items]:checkbox").attr('checked', false); }); //3,反选 $("#checkedRev").click(function () { $("[name=items]:checkbox").each(function () { //$(this).attr('checked', !$(this).attr('checked')); //方式一 this.checked = !this.checked; //方式二 }); }); //4,全选/全不选 $("#checkedAllOrNo").click(function () { $("[name=items]:checkbox").attr("checked", this.checked); }); //5,提交选中的值 $("#send").click(function () { var str = "选中的项是:\n\r"; $("[name=items]:checkbox:checked").each(function () { str += $(this).val() + '\n\r'; }); alert(str); }); }); </script> </head> <body> <form> 你喜欢的运动?<br /> <label><input name="items" type="checkbox" value="football" />football</label><br /> <label><input name="items" type="checkbox" value="basketball" />basketball</label><br /> <label><input name="items" type="checkbox" value="pingpang" />pingpang</label><br /> <label><input name="items" type="checkbox" value="baseball" />baseball</label><br /> <a id="checkedAll" href="javascript:void(0);">全选</a>- <a id="checkedNo" href="javascript:void(0);">全不选</a>- <a id="checkedRev" href="javascript:void(0);">反选</a>-<a id="send" href="javascript:void(0);">提交选中的值</a>- <label for="checkedAllOrNo">全选/全不选</label> <input id="checkedAllOrNo" type="checkbox" /> </form> </body> </html>
jQuery:1.5.1.B,效果截图返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
相关文章推荐
- jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)
- jQuery实现点击复选框即高亮显示选中行 全选、反选
- jQuery实现点击复选框即高亮显示选中行 全选、反选
- java基础---Jquery复选框checkbox全选反选及选中事件
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
- JQuery 复选框全选_反选_提交
- JQuery之子复选框全部选中则全选框选中
- jQuery实现checkbox(复选框)选中、全选反选代码
- springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选
- 复选框 全选 反选 全不选 提交 jquery
- jQuery实现点击复选框即高亮显示选中行 全选、反选
- 选中实现jquery实现复选框checkbox全选(完善)
- jquery操作复选框全选反选选中 1.9与1.8区别
- jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
- jQuery——选中、不选中、全选、取消全选等复选框操作
- jQuery:1.5.4.4,表格变色(单击行,把当行的复选框(checkbox)设为选中状态,并应用当前样式)
- Jquery 操作复选框 全选,判断是否选中等
- jquery操作复选框全选反选选中 1.9与1.8区别
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
- jquery统计用户选中的复选框的个数