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