按复选框值过滤 JavaScript 不起作用

filter by checkbox value javascript not working

本文关键字：JavaScript 不起作用 过滤 复选框      更新时间：2023-09-26

我正在尝试通过复选框值过滤我的页面。这样，只要值存在于特定行中，它就会过滤该行。我的代码的问题是如果检查甚至没有触发。我知道这一点，因为控制台日志消息测试没有显示。我在控制台中没有收到任何语法错误，但它没有看到复选框已被选中。我是JavaScript的菜鸟。选中复选框后，不应触发以下代码？

var $row = $("#data tr"),
    $filter_poweron = $("#poweron");
if($filter_poweron.checked) {
console.log('test');
    var filterText_poweron = $filter_poweron.val().toLowerCase();
    $row.each(function () {
        var $row_d = $(this);
        $row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
    });
}
<br><input type="checkbox" id="poweron" value="1O">PoweredOn <input type="checkbox" id='poweroff' value="0F"> PoweredOff

$filter_poweron是一个jQuery对象。 jQuery对象没有checked属性。

您可以使用.prop()获取 DOM 元素的 checked 属性：

var $row = $("#data tr"),
    $filter_poweron = $("#poweron");
if ($filter_poweron.prop('checked')) {
    console.log('test');
    var filterText_poweron = $filter_poweron.val().toLowerCase();
    $row.each(function () {
        var $row_d = $(this);
        $row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
    });
}

还有其他方法可以查看复选框元素是否被选中：

$filter_poweron[0].checked;
$filter_poweron.is(':checked');
$filter_poweron.filter(':checked').length;

if($(filter_poweron).is(':checked') {
console.log('test');
    var filterText_poweron = $filter_poweron.val().toLowerCase();
    $row.each(function () {
        var $row_d = $(this);
        $row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
    });
}

使用 jquery change 事件并检查其是否选中

$(filter_poweron).change(function() {
    if(this.checked) {
        //Do stuff
    }
});
相关文章：