3

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

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

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

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

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

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

我一直在玩keyupprop触发器,但我绝对没有运气。我对 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 回答