优雅地处理复选框

Gracefully handling checkboxes

本文关键字：复选框 处理      更新时间：2023-09-26

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

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

我有点不懂javascript，所以我想知道这更多是一个最佳实践问题。

一种方法是获取当前页面上选中的所有复选框，然后对其进行迭代。

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（不是数组）。

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

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

如果要检查选中了哪些复选框：
Fiddle：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');
    }
});

如果您想查看是否选中了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) *'
    };
});

您可以自己跟踪状态，以减少执行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>将始终包含复选框的当前状态。相反，该技术可以用于测试复选框的状态以及.change(...)函数中的do something...或do something else...。每次复选框状态更改时，只有更改时，代码才会被激发以执行您想要的操作。

相关文章：