jQuery，如果选中复选框

下面我有一个函数，我只希望在选中同一个tr中的复选框时触发它。请告诉我哪里做错了，常用的方法不管用。谢谢

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

当前回答

jQuery/Javascript新手，尝试了上述解决方案。最终，这对我来说是有效的:

在加载页面时保持元素隐藏(因为默认情况下复选框=未选中)，然后根据是否选中复选框来显示/隐藏元素。

这可能是一个丑陋的/多余的/无关的语法，但它现在工作!

注意:所有这些都在下面的<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>

2021-06-21 15:31:23

其他回答

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

2011-10-31 21:54:56

jQuery 1.6或更高版本:

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

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

2014-04-21 08:31:40

this $('#checkboxId').is(':checked')用于验证是否选中

& this $("#checkboxId")。Prop ('checked'， true)用于检查

& this $("#checkboxId")。Prop ('checked'， false)取消选中

2016-12-20 20:53:57

我需要知道这个属性自动检查/取消“子复选框”，这是工作:

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

2022-03-21 10:31:07