继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery实现checkbox全选、取消全选

慕UI0519722
关注TA
已关注
手记 296
粉丝 85
获赞 267

 jquery中如何判断checkbox复选框是否被选中?

谁都知道 在html 如果一个复选框被选中 是 checked="checked"。
但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked
所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr("checked")==true)
下面是jquery实现对checkbox复选框操作的示例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <SCRIPT LANGUAGE="JavaScript" src="../Common/JQuery/jquery-1.7.min.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   $("document").ready(function()
   {
        $("#btn1").click(function()
        {
            $("[name='checkbox']").attr("checked",'true');//全选
        })
       $("#btn2").click(function()
       {
            $("[name='checkbox']").removeAttr("checked");//取消全选
        })
        $("#btn3").click(function()
        {
            $("[name='checkbox']:even").attr("checked",'true');//选中所有的奇数        })
        $("#btn4").click(function()
        {
            $("[name='checkbox']").each(function()      //反选
            {
               if($(this).attr("checked"))
               {
                    $(this).removeAttr("checked");
               }
               else
               {
                    $(this).attr("checked",'true');
               }
             })
 
        })
        $("#btn5").click(function()
        {
            var str="";
            $("[name='checkbox'][checked]").each(function ()    //获取选中的所有值
            {
                 str+=$(this).val()+"\r\n";
            })
            alert(str);
        })
   })
  </SCRIPT>
 
 </HEAD>
 <BODY>
 <form name="form1" method="post" action="">
   <input type="button" id="btn1" value="全选"/>
   <input type="button" id="btn2" value="取消全选"/>
   <input type="button" id="btn3" value="选中所有奇数"/>
   <input type="button" id="btn4" value="反选">
   <input type="button" id="btn5" value="获取选中的所有值"/>
   <br>
   <input type="checkbox" name="checkbox" value="checkbox1"/>
   checkbox1
   <input type="checkbox" name="checkbox" value="checkbox2"/>
   checkbox2
   <input type="checkbox" name="checkbox" value="checkbox3"/>
   checkbox3
   <input type="checkbox" name="checkbox" value="checkbox4"/>
   checkbox4
   <input type="checkbox" name="checkbox" value="checkbox5"/>
   checkbox5
   <input type="checkbox" name="checkbox" value="checkbox6"/>
   checkbox6
   <input type="checkbox" name="checkbox" value="checkbox7"/>
   checkbox7
   <input type="checkbox" name="checkbox" value="checkbox8"/>
 checkbox8
 </form>
 </BODY>
 </HTML>
 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP