Question

我这里有2个问题。单击行上的输入应检查行的复选框。目前，由于.prev（），只有第一个文本输入将检查复选框。有没有不同的方法来做到这一点？该行的所有输入都应该检查该行的复选框。

// check checkbox for clicked row
            $('table').on('click', 'input[type=text]', function () {
                $(this).closest('td').prev().find('input').prop('checked', true);
            });

此外，第二段代码并没有正常工作。如果您专注于不同的行，如果前一行（或任何行）的文本输入为空白 - 请删除该复选框。该复选框将是一个保存，并且无法保存空白文本输入。

// remove check in inputs are empty for that row
            $('input[type=text]').blur(function () { 
                $('table tr').each(function () {
                    if ($(this).find('input[type=text]:empty').length()) {
                        $('td').find('input').prop('checked', false);
                    }
                });
            })

http://jsfiddle.net/Ldge5qzn/

Answer 1

找到最接近的tr，然后找到作为复选框的输入并设置checked属性

$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);

对于第二部分，：empty选择器针对具有不反对空值的子元素的元素进行测试，因此还必须进行修改。循环遍历每一行文本输入设置一个标志，如果它们中的任何一个不为空。相应地设置复选框

$('table tr').each(function () {
    var emptyRow = true;
    $(this).find("input[type=text]").each(function(){
        if($(this).val().length > 0) {
           emptyRow = false;   
        }
    });        
    if (emptyRow) {
        $(this).find('input[type=checkbox]').prop('checked', false);
    }
});

JSFiddle Demo

Answer 2

你可以通过检查最近的tr - 然后找到那个tr

中的复选框来做到这一点

$('table').on('click', 'input[type=text]', function () {
    $(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
});

与第二个问题相同 - 使用最接近的tr检查

然后，您可以使用filter获取值为

的所有文本输入

然后检查长度以查看是否有任何输入返回 - 并使用.prop('checked',function()相应地设置checked属性

$('input[type=text]').blur(function () {
    var $tr = $(this).closest('tr'); // get closest tr
    // get all of input[type=text] with value in that row
    var inputsWithValue = $tr.find('input[type=text]').filter(function () {
        return $.trim(this.value).length;
    });
    // set the checked to true if any element has value - else set checked to false
    $tr.find('input[type=checkbox]').prop('checked', function () {
        return inputsWithValue.length;
    }).length;
});

FIDDLE

Answer 3

看看这个。希望这有助于......

$('table').on('click', 'input[type=text]', function () {
                $(this).closest('td').parent('tr').find('input[type="checkbox"]').prop('checked', true);
            });

以下完整代码： -

JSFiddle

如果模糊时输入为空，请取消选中行复选框？

3 个答案: