0

我有一些我目前正在研究的 javascript，用于检查复选框中是否存在检查。这个 javascript 代码或多或少写得很糟糕，我们在代码中的多个位置多次检查以查看复选框是否被选中。我在问是否有一种优雅的方法来设置复选框选项的主覆盖，只检查一次以提高性能并保持代码干燥。基本上现在对于每个需要检查的地方我都会去

if($("#element").attr("checked")){ 
    do something... 
} else {
    do something else...
}

我对 javascript 有点陌生，所以我想知道这更像是一个最佳实践问题。

4

4 回答 4

1

如果要检查是否选中了特定复选框：
小提琴：http: //jsfiddle.net/TesUq/

if($("#element").is(":checked")){ 
    console.log('#element is checked');
} else {
    console.log('#element is not checked');
}

如果要检查选中了哪些复选框：
小提琴：http: //jsfiddle.net/TesUq/1/

$("input:checkbox").each(function () {
    if ($(this).is(":checked")) {
        console.log($(this).prop('id') + ' is checked');
    } else {
        console.log($(this).prop('id') + ' is not checked');
    }
});
于 2013-07-08T19:11:45.703 回答
1

如果您要查看是否选中了 ANY 复选框：

if ($('input:checkbox:checked').length > 0) {
    /* do whatever you need to do */
}

对于特定的复选框处理：

var chkBox = $('input:checkbox');
$.each(chkBox, function(i, v) {
    if ($(this).is(':checked')) {
        /* do whatever for this specific element using $(this) *\
    };
});
于 2013-07-08T19:12:36.020 回答
1

一种方法是获取当前页面上选中的所有复选框，然后遍历它们。

var checkedBoxes = document.querySelectorAll("input:checked");

for (var i =0; i<checkedBoxes.length; i++)
{
   //do something
}

这仅适用于 FF 3.1+、Safari 3.1+、IE8+和 Chrome 4+

另请注意，querySelectoAll 返回一个NodeList（不是数组）。

于 2013-07-08T19:08:33.190 回答
0

您可以自己跟踪状态以减少执行 jQuery 选择所花费的时间...

有了这个 HTML

<div>
    <label for="box1">Box 1</label>
    <input type="checkbox" id="box1" name="BoxOne" />
    <span>Checked:</span>
    <span id='box1state'>?</span>
</div>

和这个 javascript

$('document').ready(function () {

    var box1state = $('#box1state');

    $('#box1').change(function (e) {
        box1state.text(this.checked);
    });

    box1state.text($('#box1')[0].checked);
});

（见小提琴http://jsfiddle.net/stephen61/uQv5y/1/）

将<span>始终包含复选框的当前状态。这种技术可以改为用于测试复选框和do something.../或函数do something else...内的.change(...)状态。每次复选框状态发生变化时，只有当它发生变化时，代码才会被触发以执行您想要的操作。

于 2013-07-08T20:11:45.943 回答