为了账号安全,请及时绑定邮箱和手机立即绑定

jquery实现checkbox全选、取消全选

标签:
JQuery

 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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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>
 

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消