0

我有问题得到一个功能,点击所有搜索匹配的复选框。点击事件似乎触发,但没有复选框被检查,也没有调用myFunc()。jQuery的点击操作不会触发onclick属性

当手动点击每个复选框时,它完美地工作,但谁想要用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标签然后我没有纠正复选框状态改变。 A div或块元素必须有一些问题。
我也从* 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 ? 
    }); 
} 
+0

您可能应该将您的事件处理程序与jQuery绑定,因为您仍在使用它。老式的“onclick”属性在2010年通常会弃用。 – Pointy 2010-09-29 13:38:09

+0

索赔的来源? 除了我不能全局使用绑定,因为每个div onclick都是唯一的,并且它是从非jquery部分生成的。 – Kim 2010-09-29 21:52:30

回答

1

而不是试图用事件来改变复选框的值,我会做两件事情:

  1. 为了给用户一个大面积的点击,使用label元素,不是divlabel元素由浏览器直接支持,你不需要做任何事情来使它们工作。有两种方法使用它们:

    <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 
    
1

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

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

0

要跟进尖尖的评论,请使用此:

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

刚刚替补类似的东西,不管是什么元素是你想要捕捉的Click事件。

+0

不看一个选择器,除了没有类的质量检查链接 – Kim 2010-09-29 21:56:19

2

就解决了这样的问题,涉及到由ASP.net像onclick属性,这是我想要触发js代码呈现复选框的事件处理程序。首先尝试明确调用jQuery点击事件,但一段时间后意识到我不会成功这种方式。所以对我来说,解决方案是:

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

干杯。

+0

wooohoo,我的第一篇文章在stackoverflow :) – nanestev 2011-03-18 16:19:59