新的一周又开始了,努力工作~~~
做HTML页面布局的时候,经常会需要实现“全选/反选”这样的功能,那么今天我们就来分享一个最简单的实现方式的代码。本例用jQuery的方法实现。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content='text/html;charset=utf-8'/> <script type='text/javascript' src='../js/jquery.js'></script> <script> $(function(){ $("#send").click(function(){ var str="你选中的是:\r\n"; $("[name=items]:checkbox:checked").each(function(){ str += $(this).val()+"\r\n"; }) alert(str); }) $("#CheckAll").click(function(){ $("[name=items]:checkbox").attr("checked", this.checked); }) $('[name=items]:checkbox').click(function(){ var flag= true; $('[name=items]:checkbox').each(function(){ if(!this.checked){ flag = false; } }) $("#CheckAll").attr("checked", flag); }) }) </script> </head> <body> <form> 你爱好的运动是? <input type='checkbox' id='CheckAll'/>全选/全不选<br/> <input type='checkbox' name='items' value='足球'/>足球 <input type='checkbox' name='items' value='篮球'/>篮球 <input type='checkbox' name='items' value='羽毛球'/>羽毛球 <input type='checkbox' name='items' value='乒乓球'/>乒乓球 <input type='button' id='send' value='提交'/> </form> </body> </html>
该方法是通过点击选择框的方法,下面是通过点击按钮的方法。
把HTML部分换成
<form> 你爱好的运动是?<br/> <input type='checkbox' name='items' value='足球'/>足球 <input type='checkbox' name='items' value='篮球'/>篮球 <input type='checkbox' name='items' value='羽毛球'/>羽毛球 <input type='checkbox' name='items' value='乒乓球'/>乒乓球 <input type='button' id='CheckAll' value='全 选'/> <input type='button' id='CheckNo' value='全不选'/> <input type='button' id='CheckRev' value='反 选'/> <input type='button' id='send' value='提交'/> </form>
JS部分换成
$("#CheckAll").click(function(){ $("[name=items]:checkbox").attr("checked", true); }) $("#CheckNo").click(function(){ $("[name=items]:checkbox").attr("checked", false); }) $("#CheckRev").click(function(){ $("[name=items]:checkbox").each(function(){ //$(this).attr("checked", !$(this).attr("checked")); this.checked = !this.checked; }) }) $("#send").click(function(){ var str="你选中的是:\r\n"; $("[name=items]:checkbox:checked").each(function(){ str += $(this).val()+"\r\n"; }) alert(str); })