jQuery是否选中复选框

Question

我在下面有一个函数，我只想在选中同一 tr 中的复选框时触发。请告诉我我做错了什么，通常的方法不起作用。谢谢

JS

$(".add_menu_item_table").live('click', function() {
  var value_td = $(this).parents('tr').find('td.td_name').text();
  if ($('input.checkbox_check').attr(':checked')); {
    var newDiv = $('<div class="div_menu_button"></div>');
    var showDiv = $('<div id="show' + "0" + numShow++ + '" class="menu_button_info hidden"></div>');
    var toggleTrigger = $('<a id="toggleshow' + "0" + numToggle++ + '" data-target="#show' + "0" + numTarget++ + '" class="toggle_trigger actions">&nbsp;</a><div style="padding:5px"></div>');
    var menuForm = $('<form id="menu_edit_form' + "0" + numForm++ + '" class="menu_creation_form"></form>');
    $('#created_buttons_list').append(
      newDiv.text(value_td)
    );
    newDiv.wrap("<li></li>");
    newDiv.append(toggleTrigger);
    newDiv.append(showDiv);
    showDiv.append(menuForm);
    menuForm.html('<label for="navigation_label">Navigation Label</label><input id="navigation_label' + "0" + numLabelone++ + '" type="text" placeholder="Navigation Label" name="navigation_label"><label for="attribute">Attribute</label><input id="attribute' + "0" + numLabeltwo++ + '" type="text" type="text" placeholder="Attribute" name="attribute"><label for="url">URL</label><input id="url' + "0" + numLabelthree++ + '" type="text" type="text" placeholder="URL" name="url"><input type="button" value="Remove" class="button_link remove_button"> <input type="reset" value="Cancel" class="button_link">');
  }
});

var numToggle = 0;
var numShow = 0;
var numTarget = 0;
var numForm = 0;
var numLabelone = 0;
var numLabeltwo = 0;
var numLabelthree = 0;

<table width="316px" border="0" cellspacing="0" cellpadding="0" id="table-data">
  <tbody>
    <tr>
      <td width="20px"><input type="checkbox" style="width:20px;" value="1" name="checkbox"></td>
      <td width="200px"><a href="/admin/feedbackmanager/sortby/2/sortdesc/0">Page Name</a></td>
      <td width="20px"><a href="/admin/feedbackmanager/sortby/3/sortdesc/0">Add</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
      <td class="td_name">Timeplot</td>
      <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
    </tr>
    <tr>
      <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
      <td class="td_name">Operations Manuals</td>
      <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
    </tr> 
  </tbody>
</table>

Answer 1

工作示例

使用element.is(':checked')方法改变background-color

$('input').on('click', function(){
  
  is_checked = $(this).is(':checked');
  
  if(is_checked){ $('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>

Answer 2

jQuery/Javascript 新手并尝试了上述解决方案。最终，这对我有用：

1. 在加载页面时隐藏元素（因为复选框 = 默认未选中），然后
2. 根据复选框是否被选中显示/隐藏元素。

这可能有点难看/冗余/无关的语法，但它现在有效！

---

注意：这一切都在以下<script> 标记中，就在您的HTML 页面上的</body> 标记之前：

<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 代码，“解决方案代码”指的是：

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

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

Answer 3

要检查输入并通过复选框进行确认，请使用此脚本...

 $(document).on("change", ".inputClass", function () {
    if($(this).is(':checked')){
     confirm_message = $(this).data('confirm');
       var confirm_status = confirm(confirm_message);
                        if (confirm_status == true) {
                           //doing somethings...
                         }
                   }});  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> check action </lable>
<input class="inputClass" type="checkbox" data-confirm="are u sure to do ...?" >

Answer 4

如果选中：

$( "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()

获取检查的 val 数字：

$( "SELECTOR:checked" ).length

选中或取消选中复选框

$( "SELECTOR" ).prop( "disabled", false );
$( "SELECTOR" ).prop( "checked", true );

Answer 5

如果上述解决方案由于任何原因都不起作用，比如我的情况，试试这个：

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

Answer 6

此$('#checkboxId').is(':checked') 用于验证是否已检查

&这个$("#checkboxId").prop('checked', true)检查

&这个$("#checkboxId").prop('checked', false)取消选中

Answer 7

查看 ATTR | 之间的主要区别道具 |以下是：

Source: 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>

Answer 8

对于 jQuery 1.6 或更高版本：

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

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

Answer 9

if ($('input.checkbox_check').is(':checked')) {