jQuery显示行输入的值和复选框状态答案

【问题标题】：jQuery to display value of row input and checkbox statusjQuery显示行输入的值和复选框状态
【发布时间】：2017-07-24 15:51:59
【问题描述】：

请看这个小提琴... 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 选项。

任何帮助将不胜感激。

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

在calculateRow 中，您始终选择$("table.authors-list").find('input[name^="treated"]')，这将产生所有个名称以“处理”开头的输入元素。每次选中该选项中的 any 复选框时，您的 .is 都会进入 checked 条件。

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

顺便说一句，如果您开始使用类而不是检查名称，您可能会发现代码更容易编写。 You could end up with something like this.

【讨论】：

谢谢大卫。你的小提琴在我这边不起作用，警报没有显示。谢谢。我会仔细研究课程。是我的 fsfiddle jquery 设置吗？
抱歉更正，这在 Firefox 中有效，但在 IE(10) 中无效。任何想法为什么？
@Smudger：看来 jQuery 1.10.1 不会在 IE 10 jsFiddle 中加载。我不确定这是否是 IE 10 或 jsFiddle 的问题。将库更改为 1.9.1 即可。

【解决方案2】：

Fiddle

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

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

【讨论】：

感谢 jQuery00，小提琴没有显示警报，与小提琴的 onload 或 jquery 设置有关吗？谢谢
对不起，根据对 David 在 Firefox 中工作但不是 IE10 的评论？有什么建议吗？
这对我很有用，当我点击复选框时会发出警报。
感谢 Jquery，非常感谢。大卫只是根据时间来回答你，否则 100%。谢谢。

【解决方案3】：

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

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

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

Demo

【讨论】：

【解决方案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');
        }
    });

【讨论】：

【解决方案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'));

}

【讨论】：

我不是反对者，但似乎没有必要同时传递这两个参数。