【问题标题】:check whether checkbox is checked or not using jquery使用jquery检查复选框是否被选中
【发布时间】:2011-05-01 05:39:38
【问题描述】:

我想使用 jquery 检查复选框是否被选中。我想检查一下复选框的 onclick 事件。

<input type="checkbox" onclick="javascript:check_action();" id="Public(Web)" checked="checked" value="anyone" name="data[anyone]">

有可能吗?怎么样?

谢谢。

【问题讨论】:

  • 不要在事件处理程序属性中使用javascript:。它是错误的,只有当它恰好是有效的 JavaScript 语法时才有效。
  • id="Public(Web)" 不是有效的 ID 名称。 ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头,后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") 、冒号 (":") 和句点 (".")。
  • @FutureKode:在 HTML 4 中,是的。在 HTML 5 中,没有。但在可预见的未来,你是绝对正确的

标签: javascript jquery html checkbox checked


【解决方案1】:

首先,不要在事件处理程序属性中使用javascript:。这是错误的,并且仅因为它恰好是有效的 JavaScript 语法才有效。其次,您的id 无效。 id 属性中不允许使用括号(至少在 HTML 4 中;HTML 5 取消了此限制)。第三,如果您使用 jQuery,使用其 click() 方法来处理 click 事件可能是有意义的,但请注意,将其更改为这样做意味着如果用户在文档之前单击复选框加载然后您的脚本将无法处理它。

<input type="checkbox" id="Public_Web" checked value="anyone"
    name="data[anyone]">

$(document).ready(function() {
    $("#Public_Web").click(function() {
        if (this.checked) {
            alert("Checked!");
        }
    });
});

【讨论】:

  • 嘿,这行得通。感谢这个好人。感谢所有回答这个问题的人。
【解决方案2】:

你也可以用这个

if($("#checkbox_id").is(':checked'))

【讨论】:

    【解决方案3】:

    你可以这样做

    $('#checkbox_id').click(function(){
      alert(this.checked);
    });
    

    或者使用is()方法:

    $('#checkbox_id').click(function(){
      if ($(this).is(':checked')){
        alert('Checked');
      }
      else{
        alert('Not Checked');
      }
    });
    

    如果您想对表单中的所有复选框执行此操作,可以使用 :checkbox 过滤器选择器,如下所示:

    $('#form_id :checkbox').click(function(){
      alert(this.checked);
    });
    

    确保将代码包装在就绪处理程序中:

    $(function(){
      // code....
    });
    

    【讨论】:

    • 我试过这个。但它没有用。
    【解决方案4】:

    有几个选项,比如......

    1. if($("#ans").is('checked')) 
     2. if($("#ans:checked"))
     3. if($('input:checkbox:checked')) 
    

    【讨论】:

      【解决方案5】:

      首先,将事件绑定在脚本标签中,而不是内联。这更容易理解,并使您的 HTML 更具可读性。 然后可以使用jQuery选择器:checked判断复选框是否被选中。然后可以使用元素的checked属性。

      $(document).ready(function(){
          $('#Public(Web)').click(function(){
              if (this.checked) {
                  // do your code here
              }
          });
      });
      

      【讨论】:

      • 说真的,不。要检查是否选中了单个复选框,$(this).is(':checked') 简直是疯了。 this.checked 在任何可能的意义上都更好。
      • 讽刺,我猜? $(this).is(':checked') 是我的一个小烦恼,作为它所代表的一个症状。我需要详细说明吗?
      • 一点也不讽刺——看看我的变化!
      • 啊,好的。我进入了讨厌的隧道视野攻击模式。对不起。
      【解决方案6】:

      试试这个:

      if(!$('#elementid').is(':checked')){
          alert('Not checked');
      }else{
          alert('checked');
      }
      

      【讨论】:

        【解决方案7】:

        您可以使用is() 方法做到这一点:

        $('##Public_Web').click(function(){
          if ($(this).is(':checked')){
            alert('Checked');
          }
          else{
            alert('Not Checked');
          }
        });
        

        如果您想对表单内的所有复选框执行此操作,可以使用:checkbox 过滤器选择器:

        $('#form_id :checkbox').click(function(){
          alert(this.checked);
        });
        

        确保将您的代码包装在文档就绪处理程序中:

         $(document).ready(function() {
              // code....
          });
        

        【讨论】:

          【解决方案8】:

          这是另一个示例,请注意,与其在元素本身中使用 onClick 事件,我更愿意使用侦听器,但请从 id 中删除括号,这会在某些浏览器中给您带来困难。

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html><head>
          <input type="checkbox" id="PublicWeb" checked="checked" value="anyone" name="data[anyone]" />
          <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
          <script>
          $(document).ready(function(){
              $('#PublicWeb').click(function(){
                  if($(this).is(':checked')){
                      alert("its checked alright");
                  }
              });
          });
          </script>
          </head><body></body></html>
          

          【讨论】:

            【解决方案9】:

            html

             <input type="checkbox" id="chkBox" checked/> Change Check Box
            

            jquery

            $("#chkBox").change(function() {
                 if (this.checked) {
                     alert("Checked");
                     }
                     else {
                         alert("Not Checked")
                         }
                       });
            

             $("#chkBox").change(function() {
             if (this.checked) {
                 alert("Checked");
                 }
                 else {
                     alert("Not Checked")
                     }
                   });
                
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <input type="checkbox" id="chkBox" checked/> Change Check Box

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2012-01-26
              • 2014-07-02
              • 2021-07-16
              • 1970-01-01
              • 2019-04-11
              • 1970-01-01
              相关资源
              最近更新 更多