如何在單擊不同元素時切換單個複選框？

我試圖找到一個更清潔和更簡單的方法來檢查和取消選中一個複選框，當我點擊一個div元素。這是我目前正在使用的代碼用於檢查，但取消選中不起作用。如何在單擊不同元素時切換單個複選框？

我明白我寫什麼更快和/或更簡單的方法可以做，但我在一個頭緒。

注意：我正在使用將通過javascript插入的複選框。

HTML：

<div class="container"> 

    <input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm"><div class="click-me unchecked">Click here to check the checkbox.</div> 

</div>

的jQuery：

(function() { 

$('.click-me').before('<input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm">'); 

$(".container .click-me.unchecked").click(function() { 
    $(".confirm").prop("checked", true); 
    $(".click-me").toggleClass("unchecked"); 
    $(".click-me").toggleClass("checked"); 
}); 

$(".container .click-me.checked").click(function() { 
    $(".confirm").prop("checked", false); 
    $(".click-me").toggleClass("unchecked"); 
    $(".click-me").toggleClass("checked"); 
}); 

})();

來源

2012-10-05 jkupczak

你試圖將一個點擊事件綁定到頁面加載時不存在的元素 – MrOBrian

我認爲他意味着div在頁面加載時不存在，而不是複選框 –

問題是，你正在創建一個click文件加載事件處理程序，但由於您正在切換容器的類，處理程序沒有綁定到div。換句話說：在加載代碼時，沒有div與類unchecked，所以事件處理程序沒有綁定任何東西。

的快速解決方案是使用事件代表團到處理程序動態綁定：

$(".container").on('click','.click-me.unchecked',function() { 
    $(".confirm").prop("checked", true); 
    $(".click-me").toggleClass("unchecked"); 
    $(".click-me").toggleClass("checked"); 
}); 
$(".container").on('click','.click-me.checked',function() { 
    $(".confirm").prop("checked", false); 
    $(".click-me").toggleClass("unchecked"); 
    $(".click-me").toggleClass("checked"); 
});

然而，更好的方法存在。您可以通過將複選框的checked屬性設置爲自己的反轉來極大地簡化代碼。這樣，你不需要用代表團，而且確實需要checked和unchecked類完全（假設你不是也用他們的造型或其他一些腳本）：

$(".container").on('click','.click-me',function() { 
    $(".confirm").prop("checked", !$(".confirm").prop("checked")); 
});

http://jsfiddle.net/mblase75/bNkxG/

來源

2012-10-05 17:30:22 Blazemonger

$('.click-me').click(function() { 
    var checkBoxes = $(".confirm"); 
    checkBoxes.attr("checked", !checkBoxes.attr("checked")); 
});

從here

你總是可以嘗試搜索谷歌左右，爲「jQuery的切換複選框」

櫃面這個div是不會到那裏文檔加載

$(document).on('click' , '.click-me', (function() { 
    var checkBoxes = $(".confirm"); 
    checkBoxes.attr("checked", !checkBoxes.attr("checked")); 
});

它不應該的問題，如果該複選框帶班「.confirm」是有在頁面加載，只要是有此點擊是被解僱

來源

2012-10-05 17:24:31

如何在單擊不同元素時切換單個複選框？

回答

相關問題