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

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演示

Answer 2

您可以通过检查最接近的tr来做到这一点-然后找到该tr中的复选框

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

第二个问题也是一样-使用最近的tr检查

然后，您可以使用过滤器获取带有值的所有文本输入

然后检查长度以查看是否返回了任何输入-并使用.prop（'checked'，function（）

$('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;
});

小提琴

Answer 3

看看这个。希望这对您有帮助...

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

下面的完整代码：

JSFiddle