Question

我在可以有复选框或单选按钮的表中使用以下代码。

如果表格包含复选框，我想将行上的点击与复选框同步，反之亦然。

如果表中包含单选按钮，我想将行上的单击与单选按钮同步，并将其与其他单选按钮同步，因为只能检查一个。

这段代码似乎有用，但我已经合并了论坛上的几个例子，所以我想知道它是否正常或是否可以改进？

此外：

!==在Javascript中的含义是什么？

为什么$(this).closest(".active").removeClass("active");无效？

    // Radio button in a table row
    // Change the class of the row if selected
    $(".radio-table-row").change(function() {
        $(".table tr.active").removeClass("active"); //remove previous active class
        //$(this).closest(".active").removeClass("active"); // Why this does not work?
        $(this).closest("tr").addClass("active"); //add active to radio selected tr
    });

    // Checkbox in a table row
    // Just add/remove classe based on the checked property
    $(".checkbox-table-row").change(function() {
       if( $(this).prop("checked") ) {
        $(this).closest("tr").addClass("active");
       }
       else {
        $(this).closest("tr").removeClass("active");
       }
    });

    $('.product .table tr').click(function(event) {
        if (event.target.type !== 'checkbox') {
          $(':checkbox', this).trigger('click');
        }
        if (event.target.type !== 'radio') {
          $(':radio', this).trigger('click');
        }
    });

由于

Answer 1

！== / === 用于比较值和typeof变量，！= / == 只需比较该值。 ===比==快。示例：

var a = 1;
var b = "1";
if(a == b) { 
   console.log('typeof a : %s, typeof b : %s >> a == b', typeof(a), typeof(b));
}
if (a === b) { 
   console.log('typeof a : %s, typeof b : %s >> a === b', typeof(a), typeof(b));
}
if(a === parseInt(b)){
   console.log('typeof a : %s, typeof b : %s >> a === parseInt(b)', typeof(a), typeof(b));
}

检查控制台日志中的结果。

Answer 2

您的第一个问题答案是does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons，不同之处仅在于您使用的是not equal to而不是equal to。

$(this).closest(".active").removeClass("active");仅适用于closest parent element有active class

的情况

如果您想点击tr或tr激活checkbox/radio，请尝试此操作，

$('.product .table tr').click(function(event) {
    if (event.target.type !== 'checkbox' && event.target.type !== 'radio') {
        $('.product .table tr').removeClass('active');
        $(this).addClass('active');
        $(this).find(':checkbox, :radio').prop('checked',true);
    }    
});
$(':checkbox,:radio').change(function(event) {
    $('.product .table tr').removeClass('active');
    if(this.checked){
        $(this).closest('tr').addClass('active');
    }
});

Demo

jquery：点击表格中的同步复选框和单选按钮

2 个答案: