基于输入内容勾选/取消勾选复选框

Question

我有一个简单的表单，其中有一个默认被选中的复选框。同时我还有一个文本输入框。如果我在输入框中输入文本，我希望复选框被取消选中。

但是，如果我随后删除了文本输入框中的文本，我希望复选框会再次被选中。

<input type='checkbox' name='t1' checked>
<input type="text" name="t2">

有什么办法可以使用JQUERY来实现这个？

- MacMan

---

你有尝试过任何东西吗？ - j08691

Answer 1

$('input[name="t2"]').keyup(function () {
    $('input[name="t1"]').prop("checked", $.trim($(this).val()).length == 0);
});

jsFiddle示例

- j08691

Answer 2

你可以使用prop()方法。

$('input[name="t2"]').keyup(function(){
   var input=$('input[name="t1"]');
   if($(this).val().trim()==="")
     input.prop("checked",true);
   else
     input.prop("checked",false);
});

演示代码

- Pranav C Balan

Answer 3

尝试：

$(document).ready(function () {
$('#points').keyup(function () {
    console.log($(this).val())
    if($(this).val()==""){
    $('#myCheckbox').attr('checked', false); // Checks it        
    }else{
    $('#myCheckbox').attr('checked', true); // Unchecks it
    }
});
});

工作的Fiddle

- Milind Anantwar

---

我没有给你投反对票，但是为什么你在示例中留下了 console.log，并且在代码片段中使用了旧版本的 jQuery？ - j08691

Answer 4

您可以使用 oninput 来检测文本框字段值的更改：

$('input[name=t2]').on('input propertychange',function() {
    if ($.trim($(this).val()).length > 0) {
        $('input[name=t1]').prop('checked',false);
    } else {
        $('input[name=t1]').prop('checked',true);
    }
});

注意：这里使用propertychange以保证与旧版IE兼容，因为它们不支持oninput。

演示

- Felix

Answer 5

在您的文本输入框上绑定一个keyup函数，该函数将根据当前文本输入框的值是否为空，在您的复选框上设置prop('checked', true|false)。

- mr. Pavlikov