Question

我试图按复选框值过滤我的页面。这样，只要特定行中存在值，它就会过滤该行。我的代码的问题是如果检查不是甚至开火。我知道这是因为控制台日志消息测试没有显示出来。我在控制台中没有遇到任何语法错误，但是没有看到复选框已被选中。我是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

Answer 1

$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;

Answer 2

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);
    });
}

Answer 3

使用jquery更改事件并检查其是否已选中

$(filter_poweron).change(function() {
    if(this.checked) {
        //Do stuff
    }
});

按复选框值过滤javascript无效

3 个答案: