首页 > 其他 > 详细

jq完成复选框案例

时间:2020-02-28 09:58:31      阅读:140      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery/jquery.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div> <input type="checkbox" name = "check"><br> <input type="checkbox" name = "check"><br> <input type="checkbox" name = "check"><br><br> <input type="checkbox" id="checkAll">全选 </div> <script type="text/javascript"> // 方法1 有瑕疵需要个变量 $(function(){ //获取所有input ,点击触发函数 $("input[name=‘check‘]").click(function(){ // 定义变量 var i = 0; // 遍历name=check的按钮 也就是除了全选按钮之外的,名字可以随便写 $("input[name=‘check‘]").each(function(){ // 判断,该按钮checked的值为true if($(this).prop("checked")){ // 变量+1 i++; } // 判断 变量值==复选框数量时 if(i == $("input[name=‘check‘]").length){ // 将全选按钮的checked的值设为true $("#checkAll").prop("checked",true); }else{ // 否则设为false $("#checkAll").prop("checked",false) } }) }) // 点击全选框 $("#checkAll").click(function(){ // 让type为checkbox的都添加checked $("input[name=‘check‘]").prop("checked",this.checked); }) }) // 方法2 不需要变量 $(function(){ //获取所有input ,点击触发函数 $("input[name=‘check‘]").click(function(){ // 定义变量 var i = 0; // 遍历name=check的按钮 也就是除了全选按钮之外的,名字可以随便写 $("input[name=‘check‘]").each(function(){ // 判断,该按钮checked的值为true if($("[name=‘check‘]:checked").length == $("input[name=‘check‘]").length){ $("#checkAll").prop("checked",true); }else{ $("#checkAll").prop("checked",false) } }) }) // 点击全选框 $("#checkAll").click(function(){ // 让type为checkbox的都添加checked $("input[name=‘check‘]").prop("checked",this.checked); }) }) </script> </body> </html>

人生重要的不是所站的位置,而是所朝的方向;

jq完成复选框案例

原文:https://blog.51cto.com/13571682/2473908

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!