Question

如果填充了某个输入字段，我想检查一个复选框。

以下解决方案最初有效。输入输入后，正确选中复选框。删除输入后，将取消选中该复选框。但是再次输入输入后，复选框不会被检查。

<html>
<head>
    <script src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(":input").blur(function() {
            var val = $(this).val();
            var myclass = $(this).attr("class");

            if (val != null && val.length > 0) {
                $(":checkbox." + myclass).attr("checked", "checked");
            } else {
                $(":checkbox." + myclass).removeAttr("checked");
            }
        });     
    });

    </script>
</head>
<body>
<form action="#" method="POST">
  Name is selected? <input id="isNameSelected" type="checkbox" name="isName" class="name_input"></input><br/>
  Name: <input class="name_input" id="name" type="text" name="Name"></input>  
</form>
</body>
</html>

Answer 1

通过.attr()对属性进行操作会让您感到烦恼;我没有彻底调查，但我怀疑它与jQuery对“已检查”等属性的处理方式有关。

您可以将整个if语句替换为：

        $(":checkbox." + myclass).prop("checked", !!val);

根据文本字段是否为空，选中或取消选中该复选框。

请注意，因为您触发了任何:input元素的处理程序，所以当您从复选框中获得“模糊”事件时，它也会触发。

另外，在我看来，依赖于只有一个字符串的“class”属性是一种脆弱的编码实践。如果您需要对这些字段进行分组，则可以使用容器元素（可以使用.closest()和.find()找到随播字段），或者使用data-属性来执行此操作你现在正在使用“班级”。

Answer 2

这也可行（并减少2行代码）：

 $(document).ready(function() {
     $("#name").blur(function() {
         $('#isNameSelected').prop('checked', $(this).val());
     });
 });

在JQuery中，为什么我不能在调用removeAttr（“checked”）后检查复选框？

2 个答案: