logo标签列表

如果复选框被选中，使用jQuery

jquerycheckboxif-statement
524
我有一个下面的函数，我只想在同一个中的复选框被选中时触发它。 

$(".add_menu_item_table").live('click', function() {
  if ($('input.checkbox_check').attr(':checked')); {
    // I want this to trigger.
  }
});
<table id="table-data">
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkbox_check"></td>
      <td><input type="button" class="add_menu_item_table" value="Add"></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox_check"></td>
      <td><input type="button" class="add_menu_item_table" value="Add"></td>
    </tr> 
  </tbody>
</table>

如果选中，$('input.checkbox_check').checked 返回 true，否则返回 false。 - Don Cheadle
1
@mmcrae，那是不正确的。jQuery对象没有checked属性。我想你是指$('input.checkbox_check')[0].checked。 - Paul
其中之一的“来吧，jQuery”时刻。他们可以直接写checked: function(){return this.is(:checked)}就行了。 - Rager
11个回答
1295
if ($('input.checkbox_check').is(':checked')) {
16
根据jQuery文档确认，判断复选框是否被选中的跨浏览器兼容方法是使用属性：if (elem.checked) 或 if ($(elem).prop("checked")) 或 if ($(elem).is(":checked"))。请参见http://api.jquery.com/prop/。 - Adriano
如果我们要谈论性能，那么一些评论应该直接添加到Clinton提出的问题中，并建议绝对最快的建议是添加一个ID。 - Tom Stickel
1
另一种可能性就是简单地使用 if ($('#my_input:checked))。 - Tom Heaps
154

对于 jQuery 1.6 或更高版本：

if ($('input.checkbox_check').prop('checked')) {
    //blah blah
}

跨浏览器确定复选框是否被选中的方法是使用属性https://api.jquery.com/prop/

9
请注意，“.prop() 方法仅获取匹配集合中第一个元素的属性值。”请参阅 http://api.jquery.com/prop/。 - Adriano
83

  • 验证是否被选中

    $('#checkboxId').is(':checked')

  • 选中

    $("#checkboxId").prop('checked', true)

  • 取消选中

    $("#checkboxId").prop('checked', false)
38

如果以上的解决方案由于任何原因都无法解决问题，就像我的情况一样，请尝试这个方法：

  <script type="text/javascript">
    $(function()
    {
      $('[name="my_checkbox"]').change(function()
      {
        if ($(this).is(':checked')) {
           // Do something...
           alert('You can rock now...');
        };
      });
    });
  </script>
16

如果被选中：

$( "SELECTOR" ).attr( "checked" )  // Returns ‘true’ if present on the element, returns undefined if not present
$( "SELECTOR" ).prop( "checked" ) // Returns true if checked, false if unchecked.
$( "SELECTOR" ).is( ":checked" ) // Returns true if checked, false if unchecked.

获取 已选中 的值：

$( "SELECTOR:checked" ).val()

获取已选中的值：

$( "SELECTOR:checked" ).length

勾选或取消勾选复选框

$( "SELECTOR" ).prop( "disabled", false );
$( "SELECTOR" ).prop( "checked", true );
1
$( "SELECTOR:checked" ).val() 在 value="on" 的情况下，如果被选中则返回 "on"，否则返回 "" - 非常有用！ - Fanky
10

请查看下面ATTR | PROP | IS之间的主要区别：

来源：http://api.jquery.com/attr/

$( "input" )
  .change(function() {
    var $input = $( this );
    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
      ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
      ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
  })
  .change();
p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
<meta charset="utf-8">
  <title>attr demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 

 
</body>
</html>

8

您可以使用.is(':checked')方法，如果元素被选中，则返回true，否则返回false。

示例

$('input').on('click', function(){
  isChecked = $(this).is(':checked')
  
  if(isChecked){ 
    $('html').css('background-color','green')
  }
  else{ 
    $('html').removeAttr('style')
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox"> Try me </label>

1
新手学习jQuery/Javascript并尝试以上解决方案。最终，以下是对我有效的方法： 1.在加载页面时保持元素隐藏（因为默认情况下复选框未选中），然后 2.根据复选框是否选中来显示/隐藏元素。 语法可能有些丑陋/冗余/多余，但目前可行！
注意：以下所有内容都要放在HTML页面中，位于<body>标签的结束前，用<script>标签包裹起来。
<script type="text/javascript">
   // 'solution code' goes here...
</script>

"解决方案代码："
    $(document).ready(function(){

          // HIDE ELEMENTS UPON PAGE LOAD (CHECKBOX = UNCHECKED)
          if ($([id="show_box"]).is(':checked') == false)
                $("#hiddenDiv").hide();

          // SHOW/HIDE ELEMENTS VIA CHECKBOX STATUS
          $('[id="show_box"]').change(function()
          {
            if ($(this).is(':checked'))
                $("#hiddenDiv").fadeIn();
            else
                $("#hiddenDiv").fadeOut();
          });

    });
  • [id="show_box"]（具有id“show_box”的复选框）
  • #hiddenDiv（我想要隐藏/显示的元素的ID）
  • this（由于它是嵌套的，所以最终代表“show_box”）

这是页面上的HTML代码，'solution code' 是指这里：

<!-- CHECKBOX -->
<input type="checkbox" id="show_box" name="box" value="">

<!-- ELEMENT THAT SHOWS/HIDES -->
<div id="hiddenDiv"></div>
0

我需要知道这个属性来自动检查/取消选中“子复选框”，现在它已经可以正常工作：

jQuery('.checkbox-parent').click(function(){
    jQuery('.checkbox-child').prop(
        'checked', 
        jQuery('.checkbox-parent').prop('checked')
    ); 
});
0

以下内容可以在JavaScript和jQuery中完成，非常简单。

var getVal=$('#isAgeSelected').is(":checked"); // jQuery

var getVal=document.getElementById("isAgeSelected").checked //JavaScript

if (getVal==true) {
// do something
} else {
// do something
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接