如何根据文本区域中的值选中和取消选中 jquery 中的复选框答案

【问题标题】：How to check and uncheck a checkbox in jquery based on a value in a textarea如何根据文本区域中的值选中和取消选中 jquery 中的复选框
【发布时间】：2014-05-31 11:00:20
【问题描述】：

我有如下所示的 jquery 代码。第一次，当我在 #statement 的文本区域中输入任何内容时，#checkbox 的相应复选框在屏幕上显示为已选中 -- 完美。

然后，当我清除 #statement 的文本区域时，#checkbox 的相应复选框在屏幕上显示为未选中 - 到目前为止一切顺利。

但是当我继续在 #statement 的文本区域中再次输入时，#checkbox 处的相应复选框没有在屏幕上显示 已选中 -- 不好。

  $('#statement').bind('input propertychange', function() {
    if ($('#statement').val() != '') $('#checkbox').attr('checked', true);
    else $('#checkbox').attr('checked', false);
  }); // end .bind()

【问题讨论】：

标签： jquery checkbox textarea

【解决方案1】：

虽然您已经接受了答案，但我建议您稍微修改一下方法：

$('#statement').on('keyup paste input', function(){
    $('#checkbox').prop('checked', this.value.trim().length > 0);
});

针对来自 OP 的评论，询问为什么这可能是一种更好的方法的理由，有两个重大改进：

首先，使用prop() 来设置和取消设置checked 属性；这是一项改进，因为阅读文档后，jQuery 团队明确表示：

...不要使用 [removeProp()] 删除本机属性，例如选中、禁用或选中。 这将完全删除该属性，并且一旦删除，就无法再次将其添加到元素。请改用.prop() 将这些属性设置为false。

（强调我的）。

其次，使用String.trim()从字符串中删除前导和尾随空格，然后然后比较长度；这可以防止用户通过输入空白字符串来绕过检查¹，从而触发复选框的检查。

只要您可以在客户端脚本中确保任何保护免受恶意用户的攻击：请记住在服务器和客户端上进行验证，这是 不是可选的。

【讨论】：

好的，谢谢@DavidThomas。当我测试它时，之前接受的答案对我有用。您能否通过提供理由说明您的“稍微修改的方法”可能是更好的解决方案来修改您的答案？谢谢。

【解决方案2】：

我也遇到了同样的问题。你只需要使用 prop 而不是 attr。这是怎么回事

$('#statement').bind('input propertychange', function() {
    if ($('#statement').val() != '') $('#checkbox').prop('checked', true);
    else $('#checkbox').removeProp('checked');
}); // end .bind()

【讨论】：

在 if 和 else 上？ @MuhammadSaifullah
我也这样做了$('#checkbox').prop('checked', false) 并对其进行了测试，它运行良好。谢谢@MuhammadSaifullah
两者都可以，在使用 html 属性处理 bool 时，始终使用 prop 和 removeProp。
实际上.removeProp('checked', false) 不像原来的.prop('checked', false) 那样工作，所以我恢复了。 [在 Chrome 最新/稳定版中]
请记住如果您想再次使用该属性，则不应使用removeProp() 的警告； removeProp 删除属性本身它不只是取消设置。

【解决方案3】：

你也可以像下面这样使用keyup事件：

$('#statement').keyup( function(){
    if( $('#statement').val().length > 0  )
       $("#checkbox").prop('checked' , 'keyup'  );
    else
        $("#checkbox").removeProp( 'checked' );
});

【讨论】：