ylbtech-jQuery:jQuery学习
jQuery语法实例
复选框应用
效果截图
jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)HTML代码返回顶部
<html xmlns="/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 href="javascript:void(0);">全选</a>-<a href="javascript:void(0);">全不选</a>-<a href="javascript:void(0);">反选</a>-<a href="javascript:void(0);">提交选中的值</a>-<label for="checkedAllOrNo">全选/全不选</label><input type="checkbox" /></form></body></html>
jQuery:1.5.1.B,效果截图返回顶部
作者: