jQuery如果选中复选框

本文翻译自：jQuery if checkbox is checked

I have a function below that I want to only trigger when a checkbox in the same tr is checked. 我有一个函数，我只想在检查同一个tr中的复选框时触发。 Please tell me what I am doing wrong, the usual methods are not working. 请告诉我我做错了什么，通常的方法不起作用。 Thanks 谢谢

JS 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>
    <tr>
      <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
      <td class="td_name">Company Structure</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">CMS Report</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">Test Document</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">Test CMS page</td>
      <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
    </tr>
  </tbody>
</table>

---

#1楼

参考：https://stackoom.com/question/XOoS/jQuery如果选中复选框

---

#2楼

for jQuery 1.6 or higher: 对于jQuery 1.6或更高版本：

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

the cross-browser-compatible way to determine if a checkbox is checked is to use the property https://api.jquery.com/prop/ 与浏览器兼容的方法来确定是否选中了复选框是使用属性https://api.jquery.com/prop/

---

#3楼

this $('#checkboxId').is(':checked') for verify if is checked 这个$('#checkboxId').is(':checked')验证是否已选中

& this $("#checkboxId").prop('checked', true) to check ＆this $("#checkboxId").prop('checked', true)来检查

& this $("#checkboxId").prop('checked', false) to uncheck ＆this $("#checkboxId").prop('checked', false)取消选中

---

#4楼

See main difference between ATTR | 看到ATTR |之间的主要区别 PROP | PROP | IS below: 如下 ：

Source: http://api.jquery.com/attr / 资料来源：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> 

---

#5楼

If none of the above solutions work for any reason, like my case, try this: 如果上述解决方案都不能出于任何原因（例如我的情况），请尝试以下方法：

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

---

#6楼

If checked : 如果选中 ：

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

Get the checked val: 获取检查的 val：

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

Get the checked val numbers: 获取选中的 val数字：

$( "SELECTOR:checked" ).length

Check or uncheck checkbox 选中或取消选中复选框

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