0

我在获取单击所有搜索匹配复选框的功能时遇到问题。myFunc()click 事件似乎触发了，但没有检查或调用复选框。

手动单击每个复选框时效果很好，但是谁想用 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更改为label时，我不必更正复选框状态。一个div或块元素在那里一定有一些问题。
我还从div中删除了 onclick ，这意味着我能够直接定位复选框，并且可以将它们的 ID 值更改为实际_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 ?
  });
}
4

4 回答 4

2

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

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

干杯。

于 2011-03-18T16:19:00.163 回答
1

this.parentNode.click应该是this.parentNode.click()。

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

于 2010-09-29T13:40:46.490 回答
1

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

  1. 为了给用户一个大的点击区域，使用一个label元素，而不是一个div. label浏览器直接支持元素，您无需执行任何操作即可使其正常工作。有两种使用它们的方法：

    <label><input type='checkbox'>Foo</label>

    或者

    <input type='checkbox' id='chk1'><label for='chk1'>Foo</label>

    前者很好，因为您不必使用 ID（它必须在页面上完全唯一，所以它开始变得很痛苦）；后者非常适合标记情况，无论出于何种原因，您都不能input成为 的孩子。label

  2. 如果您需要更改代码中的状态，请直接更改状态，而不是尝试触发事件。例如，如果我想更改复选框的状态chk1，我只需这样做：

    $('#chk1').attr("checked", true); // or false, of course

    ...或清除容器中的所有复选框（对那些“全部”或“无”链接有用）：

    $('#container input[type=checkbox]').attr("checked", false); // or true, of course
于 2010-09-29T13:44:13.430 回答
0

要跟进 Pointy 的评论，请使用以下命令：

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

只需将类似的东西替换为您尝试为其捕获点击事件的任何元素。

于 2010-09-29T13:41:23.233 回答