logo标签列表

使用jQuery检查复选框是否被选中

javascriptjqueryhtmlcheckboxchecked
7
我想使用jQuery检查复选框是否被选中。我想在复选框的单击事件上进行检查。
<input type="checkbox" onclick="javascript:check_action();" id="Public(Web)" checked="checked" value="anyone" name="data[anyone]">

这可行吗？怎么做？

谢谢。

1
不要在事件处理程序属性中使用 javascript:，这是错误的，只有因为它恰好是有效的JavaScript语法才能工作。 - Tim Down
id="Public(Web)" 不是一个有效的ID名称。ID和NAME标记必须以字母（[A-Za-z]）开头，可以后跟任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“_”）、冒号（“:”）和句点（“.”）。 - Mark Steggles
1
@FutureKode：在HTML 4中，是的。在HTML 5中，不是。但在可预见的未来，你绝对是正确的。 - Tim Down
9个回答
12

您也可以使用这个

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

首先，不要在事件处理程序属性中使用javascript:。这是错误的做法，只能工作是因为它碰巧是有效的JavaScript语法。其次，您的id无效。在HTML 4中，id属性不允许使用括号（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!");
        }
    });
});
嘿，这个可行。谢谢你做的好。感谢所有为此回答的人。 - gautamlakum
6
你可以这样做：

你可以像这样做

$('#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);
});

请确保将你的代码放在ready函数中:

$(function(){
  // code....
});
<script type="text/javascript"> $('#Public(Web)').click(function(){ if ($(this).is(':checked')){ alert('已选中'); } else { alert('未选中'); } }); </script> 我尝试了这个，但它没有起作用。 - gautamlakum
3
有几个选项可以选择，例如...
1. if($("#ans").is('checked')) 
 2. if($("#ans:checked"))
 3. if($('input:checkbox:checked'))
2
首先，在脚本标签中绑定事件，而不是内联。这样更容易跟踪，并使您的HTML更加可读。然后，您可以使用元素的checked属性来确定复选框是否被选中。
$(document).ready(function(){
    $('#Public(Web)').click(function(){
        if (this.checked) {
            // do your code here
        }
    });
});
1
认真地说，不行。要检查单个复选框是否被选中，使用 $(this).is(':checked') 就是完全的疯狂。this.checked 从各个方面来看都更好。 - Tim Down
讽刺吗？$(this).is(':checked')是我个人的一个小烦恼，因为它代表了一些问题。需要我详细解释吗？ - Tim Down
绝不是讽刺 -- 看看我的修改！ - lonesomeday
啊，好的。我陷入了宠物恼怒的隧道视觉攻击模式。抱歉。 - Tim Down
1
你可以使用 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....
  });
1

Try This:

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

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

0
这是另一个例子，注意不要在元素本身中使用 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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接