JQuery的點擊兒童在家長點擊了

Question

我有一個漫長的一天....

我有以下

<div class="background" onclick="javascript:$('this checkbox').click();"> 
    <div class="picture"> 
     <img class="colors" src="458x395.png" /> 
    </div> 
    <input type="checkbox" value="nothing" name="check" class="selsts" /> 
</div> 
<div class="background" onclick="javascript:$('this checkbox').click();"> 
    <div class="picture"> 
     <img class="colors" src="asdfag3.png" /> 
    </div> 
    <input type="checkbox" value="aff4t" name="check" class="selsts" /> 
</div> 

此代碼，它應該點擊複選框。我無法通過名稱，班級或ID區分，我必須使用該類型。我也需要確保它在父div中，而不是別的。

任何想法，爲什麼這不工作？我相信我只是有一個愚蠢的時刻。 ：\

感謝

Answer 1

你jQuery是尋找一個this標記，它不存在。你不應該內聯你的JS。而.click()不檢查，當你添加新元素的DOM，那麼試試這個：

<div class="background"> 
    <div class="picture"> 
     <img class="colors" src="458x395.png" /> 
    </div> 
    <input type="checkbox" value="nothing" name="check" class="selsts" /> 
</div>​ 

然後把它實際上選中複選框使用（這是jQuery的1.7）：

$(".background").on("click",function(e) { 
    var chk = $(this).find('input[type=checkbox]')[0]; 
    chk.checked = !chk.checked; 
});​ 

此解決方案不會遇到DOM冒泡問題James描述

Answer 2

您將此字符串作爲字符串傳遞，而不是作爲對象傳遞。 jquery不會理解這個的範圍。考慮附加功能以外的HTML分開關注

試試這個，它將允許用戶檢查/取消選中，不會傳播創建循環的事件。

<div class="background"> 
    <div class="picture"> 
     <img class="colors" src="458x395.png" /> 
    </div> 
    <input type="checkbox" value="nothing" name="check" class="selsts" /> 
</div> 

的Javascript

$(document).ready(function(){ 
    $(".background").click(function(e){ 
     var chk = $($(this).find("input[type='checkbox']")); 
     if(chk.attr('checked')) 
     { 
      chk.attr('checked',false); 
     }else{ 
      chk.attr('checked',true); 
     } 

     }); 
    }); 

例子：http://jsfiddle.net/fycFB/

Answer 3

當你使用jQuery，你可能不應該使用onclick屬性綁定你的事件處理程序。

主要問題是你傳遞一個字符串給jQuery。該字符串被解釋爲一個選擇器，並將查找類型爲checkbox的元素，它是類型爲this的元素的後代。顯然，這不會存在。

你想要更多的東西是這樣的：

$("div.background").click(function() { 
    $(this).find(":checkbox").click(); 
}); 

或者，您也可以通過this將jQuery作爲一個上下文（相當於使用find）：

$("div.background").click(function() { 
    $(":checkbox", this).click(); 
}); 

請注意，我使用:checkbox而不是僅僅使用checkbox（使用:）。這是與checkbox類型的input元素匹配的選擇器。

但是，這可能是一個大問題。你將陷入一個無限循環（因爲DOM事件冒泡了樹）。您需要在複選框上捕獲click事件，並停止在那裏傳播它。

Answer 4

onclick="$(this).find(':checkbox').attr('checked','checked')" 

Answer 5

HTML

<div class="background"> 
    <div class="picture"> 
     <img class="colors" src="458x395.png" /> 
    </div> 
    <input type="checkbox" value="nothing" name="check" class="selsts" /> 
</div> 

的Javascript

$('div.background').click(function() { 
    var checkBox = $(this).find('input:checkbox'); 
    checkBox.attr('checked', !checkBox.attr('checked')); 
}); 

Answer 6

你需要這樣嗎？

$("input[type=checkbox]").click(function(){ alert('Checked');});​ 

http://jsfiddle.net/JF2xu/1/

Answer 7

<div class="background" style="border:1px solid black;" onclick="javascript:$(this).find(':checkbox').attr('checked',true);"> 
        <div class="picture"> 
        <img class="colors" src="458x395.png" /> 
        </div> 
       <input type="checkbox" value="nothing" name="check" class="selsts" /> 
      </div>