跨度容器中的複選框有什麼問題？

Question

我有一個跨度容器內的複選框。使用下面的代碼，當span標籤被點擊時，我可以成功地切換複選框。但是，單擊複選框本身時會失敗。

$(function(){ 
     $("span").click(function(e){ 
      if ($(this).find("input[name='test']").attr('checked') == true) 
      { 
       $(this).find("input[name='test']").removeAttr('checked') ; 
      } 
      else 
      { 
       $(this).find("input[name='test']").attr('checked', 'checked') ; 
      } 
     }) ; 

    }) ; 

爲什麼會發生這種情況？我該如何解決這個問題？

Answer 1

.attr('checked') == true 

的jQuery 1.6.2返回 '假' 到這一點，因爲.attr（ '檢查'）== '檢查'

我建議做一個小的重構：

$(function(){ 
    $("span").click(function(e) { 
     var chk = $(this).find("input[name='test']"); 
     if (chk.is(':checked')) { 
      chk.removeAttr('checked') ; 
     } 
     else { 
      chk.attr('checked', 'checked') ; 
     } 
    }); 
}); 

Answer 2

你的問題是，複選框本身被點擊時，點擊事件冒泡到<span>然後阻卻作用。 This fiddle reproduces the problem（單擊複選框本身不會切換其狀態，因爲該函數會取消默認複選框行爲）。

速戰速決是使用.stopPropagation()停止事件冒泡點擊複選框時。例如：

$("span").click(function(e) { 
    var chk = $(this).find("input[name='test']"); 
    chk.prop('checked', !chk[0].checked); /* assume only 1 checkbox */ 
}).find("input[name='test']").click(function(e) { 
    e.stopPropagation(); 
}); 

See this in action。

另外，檢查點擊目標看點擊了哪個元素，只有切換狀態，如果該複選框本身沒有點擊。例如。

$("span").click(function(e) { 
    if (e.target.type != "checkbox") { 
     var chk = $(this).find("input[name='test']"); 
     chk.prop('checked', !chk[0].checked); 
    } 
}); 

See this in action

注意，從的jQuery 1.6，你應該使用的.prop(checked)代替.attr()。

Answer 3

$("span").click(function() { 
    $("input[name='test']", this).prop('checked', $("input[name='test']",this).prop('checked') ? false: true); 
});