Question

我有一个简单的表单，默认情况下会选中一个复选框。我还有一个文本输入字段。如果我在输入字段中输入文本，我希望取消选中该复选框。

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

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

我知道如何使用JQUERY做到这一点吗？

Answer 1

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

<强> jsFiddle example

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);
});

FIDDLE DEMO

Answer 3

在文本输入上绑定键盘功能，根据当前文本输入值是否为空，在复选框上设置prop（'checked'，true | false）。

Answer 4

尝试：

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

<强> Working Fiddle

Answer 5

您可以使用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 1}}的旧IE版本的兼容性

Demo

根据输入内容选中/取消选中复选框

5 个答案: