3

我想在 jquery 中创建一个函数，如果输入文本框有内容，请选中复选框。如果为空，请取消选中该复选框。

<form>
<input class="boxcheck" type="checkbox">
checkbox

<input class="boxtext" type="text">
text here 
</form>

复选框和文本输入在开始时将为空，但如果用户决定在文本框中写入内容，则如果用户尚未选中复选框，则应自动选中复选框。

另一个问题可能是用户将键入某些内容并且此功能将选中复选框，但如果用户返回输入框并删除输入框中的内容，则该复选框也应自动取消选中。

我能想到的最后一个问题是，如果用户在文本框中写了一些东西，并且此函数选中了复选框，但用户出于某种奇怪的原因取消选中了该框，是否可以再次强制选中该复选框？

我一直在玩keyup和prop触发器，但我绝对没有运气。我对 JavaScript 也很陌生。

我一直在玩的代码是这样的：

    $('input[text]').keyup(function(){
    if (this.value.length > 0) {
       $('input[name="checkbox"]').prop('disabled', false)
    } else {
})
4

3 回答 3

1

使用keyup()函数检查 val 和条件以检查取消选中复选框 tyr this

 $(".boxtext").keyup(function(){
   if($(this).val()!= ""){
     $('.boxcheck').prop('checked',true);
   }else{
     $('.boxcheck').prop('checked',false);
   }
})

更新

对于您的最后一个问题..我认为禁用复选框会更好..这样用户将无法取消选中...

 $('.boxcheck').prop('disabled',true);

更新的小提琴

于 2013-01-28T06:39:31.903 回答
0

我建议处理除了 keyup 之外的 blur 事件，因为这涵盖了用户在没有键盘的情况下更改文本框值的任何情况（复制/剪切/粘贴/拖放/拖放等），而无需担心哪些浏览器允许或不允许您处理剪贴板事件：

$(document).ready(function() {
    $("input.boxtext").on("keyup blur", function() {
        $("input.boxcheck").prop("checked", this.value != "");
    });

    // don't allow user to manually change the checkbox
    $("input.boxcheck").click(function() {
        return false;
    });
});

演示：http: //jsfiddle.net/WTVEn/

请注意，虽然我已经包含了阻止用户更改复选框的代码，但如果无法手动编辑它，为什么您根本需要该复选框？

于 2013-01-28T06:43:13.353 回答
0

尝试这个：

 $(".boxtext").change(function(){
   $('.boxcheck').attr('checked',true);
   if($(this).val()== ""){
     $('.boxcheck').attr('checked',false);
   }
});
于 2013-01-28T06:44:40.553 回答