jquery - jQuery显示行输入的值和复选框状态

Question

请看这个小提琴... http://jsfiddle.net/sM8sb/1/

jQuery 语法是：

$(document).on('click', 'input[name^="treated"]', function () {
    var row = $(this).closest('tr');
    calculateRow(row);
});

function calculateRow(row) {
    if ($("table.authors-list").find('input[name^="treated"]').is(':checked')) {
        var product = row.find('input[name^="product"]').val();
        alert(product + ' checked');
    } else {
        var product = row.find('input[name^="product"]').val();
        alert(product + ' unchecked');
    }

}

我想要的是，当我选中一行的复选框时，它会显示该行的产品输入值和“已检查”状态。当我取消选中它时，它显示相同但未选中。

我不确定 jsfiddle 上 jQuery 的 onload/ondomready 选项。

任何帮助，将不胜感激。

Answer 1

在calculateRow中，您总是选择$("table.authors-list").find('input[name^="treated"]')哪个将产生所有名称以“处理过的”开头的输入元素。每次选中该选项中的任何复选框时，您.is都会进入选中状态。

你会想要使用类似的东西row.find('input[name^="treated"]')。或者row.find(':checkbox')，或者只是this从点击侦听器作为输入参数传递给calculateRow( Demo )。

顺便说一句，如果您开始使用类而不是检查名称，您可能会发现代码更容易编写。你可能会得到这样的结果。

Answer 2

没有必要找到行来做你想做的事。您的代码会更有效，如下所示：

$(document).on('click', 'input[name^="treated"]', function () {
    calculateRow($(this));
});

function calculateRow(checkbox) {
    var product = checkbox.prev().val();
    alert(product + (checkbox.prop('checked') ? ' checked' : ' unchecked'));
}

演示

Answer 3

小提琴

您必须在当前行中找到复选框，而不是在整个表格中。

if (row.find('input[name^="treated"]').is(':checked')) {

Answer 4

尝试这个

    $('input[name^="treated"]').change(function () {
        var this_checkbox = $(this);
        if (this_checkbox.is(':checked')) {
            var product = this_checkbox.closest('tr').find('input[name^="product"]').val();
            alert(product + ' checked');
        }
        else {
            var product = this_checkbox.closest('tr').find('input[name^="product"]').val();
            alert(product + ' unchecked');
        }
    });

Answer 5

这里已经给出的答案非常好。这只是我的看法。

$(document).on('click', 'input[name^="treated"]', function () {
    var row = $(this).closest('tr');
    calculateRow(row, $(this));
});

function calculateRow(row, chkBox) {
    var checked = chkBox.is(':checked'),
        product = row.find('input[name^="product"]').val();

    alert(product + ((checked)?' checked': ' unchecked'));

}