Question

我在获取点击所有搜索匹配复选框的功能时遇到问题。点击事件似乎触发，但没有检查复选框，也没有调用myFunc（）。

手动点击每个复选框时效果很好，但是谁想要使用40多个复选框 - 而不是我的用户您可能想知道为什么我使用div-onclick而不是直接在输入复选框上。这是因为我想让我的用户点击更大区域，而不是一个小复选框。

我想为我的用户提供一个超链接，以选择多个与某些属性值匹配的复选框。

我需要快速解决方案，因为我没时间。

HTML

<div id="container">
<a href="#" onclick="clickAndCheckAllMatch('search for this text');return false;">some text</a>
<div id="*actual_ID*" onclick="myFunc(a, b, c, d);">
  <input type="checkbox" id="book-*actual_ID*" onclick="this.parentNode.click;return false;">
</div>
</div>

JS

function myFunc(a, b, c, d) {
  // does stuff
}
function clickAndCheckAllMatch(value) {
  $('div[onclick*='+value+']').each(function(idx,e){
  $('book-'+this.id).click();
}

修改
当我从 div 更改为标签时，我没有必要更正复选框状态。 div 或block-element必须有一些问题我还从* div * s中删除了onclick，这意味着我能够直接定位复选框，并且可以将其ID值更改为* actual_ID *。

function clickAndCheckAllMatch(value) {
  $('input[onclick*='+value+']').each(function(idx,e){
    // e == this
    $(this)[0].click();
    if ($(this).attr('disabled')) {
      //do nothing
    } else {
      if ($(this).attr('checked')) {
        //do nothing
      } else {
        $(this)[0].click(); // only one checkbox per ID
      }
    }
  });
}
function CheckAll() {
  $('#container input[type=checkbox]:not(:checked)').each(function(idx,e){
    $(this).click(); // notice the difference ?
  });
}

Answer 1

刚刚解决了这样的问题，与ASP.net呈现的复选框事件处理程序有关，就像我想要触发的onclick属性中的js代码一样。首先尝试显式调用jQuery click事件，但过了一段时间才意识到我不会以这种方式成功。所以对我有用的解决方案是：

someOtherObject.click(eval($('input').attr('onclick')));

干杯。

Answer 2

this.parentNode.click应为this.parentNode.click()。

this.parentNode.click只是方法对象。调用它不会触发div的click事件。您必须在click之后添加大括号，否则不会触发事件。

Answer 3

我不会尝试使用事件来更改复选框的值，而是会做两件事：

要为用户提供大面积点击，请使用label元素，而不是div。浏览器直接支持label元素，您无需执行任何操作即可。有两种方法可以使用它们：
```
<label><input type='checkbox'>Foo</label>
```
或
```
<input type='checkbox' id='chk1'><label for='chk1'>Foo</label>
```
前者很好，因为你不必使用ID（必须在页面上完全独特，所以它开始变得很痛苦）;后者适用于标记情况，因为无论出于何种原因你都不能让input成为label的孩子。
如果您需要更改代码中的状态，请直接更改状态，而不是尝试触发事件。例如，如果我想更改复选框chk1的状态，我就这样做：
```
$('#chk1').attr("checked", true); // or false, of course
```
...或清除容器中的所有复选框（对“全部”或“无”链接有用）：
```
$('#container input[type=checkbox]').attr("checked", false); // or true, of course
```

Answer 4

要跟进Pointy的评论，请使用：

$(document).ready(function(){
  $('.theAnchorTagClass').click(function(){
    //Code to check all boxes here or do whatever else you need...
  });
});

只需用类似的东西替换你试图捕获点击事件的任何元素。

jQuery单击操作不会触发onclick属性

4 个答案: