使用jQuery每次准确检测复选框状态

Question

简单地说：我如何使用jQuery可靠地检测复选框状态。

我已经看过这个问题的几个版本，并且大多数人都找到了适合他们的解决方案。但是，在这个（看似简单的）情况下，似乎没有一个对我有用。

我创建了5个独立（但非常相似）的检测脚本版本。一个工作，但是太具体而无法使用（对每个chkbox使用id），另一个4或者检测为已检查，或者两者都未检查。

我宁愿坚持使用jQuery来保持所有其他人在这个项目上工作的代码（各种JS级别），但如果它只是JS，那么我想这比不工作更好！ / p>

HTML（基本上默认为Bootstrap3 inline-checkboxes）;

<form>
    <p>Do you have a password?</p>
    <fieldset class="inline">
        <label for="radio-inline-1" class="block-label">
            <input checked="checked" type="radio" value="no" name="radio-inline-group" id="radio-inline-1">
            No, I want to create a password now
        </label>
        <label for="radio-inline-2" class="block-label">
            <input autocomplete="off" type="radio" value="yes" name="radio-inline-group" id="radio-inline-2">
            Yes, I already have a password
        </label>
    </fieldset>
</form>

JavaScript / jQuery

//Both detected as unchecked
$('.block-label input').each(function(){
    if ($('.block-label input').checked) {
        //checked 
    } else {
        //unchecked;
    }
});

//or if I want them both detected as checked
$('.block-label input').each(function(){
    if ($('.block-label input:checked').length > -1) {
        //checked
    } else {
        //unchecked
    }
});

//back to unchecked for prop
$('.block-label input').each(function(){
    if ($('.block-label input').prop('checked') === 'checked') {
        //checked
    } else {
        //unchecked
    }
});

//but strangely checked for attr
$('.block-label input').each(function(){
    if ($('.block-label input').attr('checked') === 'checked') {
        //checked            
    } else {
        //unchecked               
    }
});

//vanilla, ultra specific, JS to check that it IS actually possible to detect the state
var chkBox1 = document.getElementById('radio-inline-1');
var chkBox2 = document.getElementById('radio-inline-2');
if (chkBox1.checked) {
        //checked
} else {
        //unchecked
}
if (chkBox2.checked) {
        //checked
} else {
        //unchecked
}

我已将所有这些方法放在一个小提琴中并将它们附加到按钮上以方便，但真正的函数必须在DOM加载后直接运行（document.ready）：https://jsfiddle.net/m1o4u10u/3/

Answer 1

您的主要问题在以下两行：

$('.block-label input').each(function(){
    if ($('.block-label input').checked) {

您正在遍历每个输入，但随后在函数内检索所有输入。你应该把它改成：

$('.block-label input').each(function(){
    if ($(this).checked) {

但即便如此，因为.checked是一个DOM元素属性，而不是一个jQuery属性。如果您获得底层DOM元素，它将起作用：

$('.block-label input').each(function(){
    if ($(this)[0].checked) {  // Option 1
    if (this.checked)          // Option 2

但你也可以使用jQuery使其更具可读性：

$('.block-label input').each(function(){
    if ($(this).is(":checked")) {

Answer 2

所有5种方法都有效但我们需要改变一些事情。您的演示代码未正确使用jquery选择器。因此，您可以查看我编辑的版本：https://jsfiddle.net/2hg5c8Ld/

我已根据以下内容替换了您的代码：

尝试1例

$('.block-label input').checked

进入这个

this.checked

探索：使用＆＃34;这个＆＃34;作为每个选择器的当前值

尝试2个案例

($('.block-label input:checked').length > -1)

进入这个

$(this).is(':checked')

探索：使用＆＃34;是＆＃34;检查＆＃34;：已检查＆＃34;选择

尝试3个案例

$('.block-label input').prop('checked') === 'checked'

进入这个

$(this).prop('checked')

expl：使用当前选择器＆＃34; $（this）＆＃34;和.prop return boolean

尝试4个案例

($('.block-label input').attr('checked') === 'checked'

进入这个

$(this).attr('checked')

expl：使用当前选择器＆＃34; $（this）＆＃34;和.attr return boolean

希望它会有所帮助......