在JQuery中，为什么可以't调用removeAttr(“checked”）后，我选中一个复选框

In JQuery, why can't I check a checkbox after removeAttr("checked") is called?

本文关键字：checked 复选框 一个 removeAttr 为什么 JQuery 调用      更新时间：2023-09-26

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

下面的解决方案最初有效。输入输入后，复选框被正确选中。删除输入后，复选框将被取消选中。但在再次输入输入后，复选框不会被选中。

<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>

通过.attr()对属性进行操作会让您感到困惑；我还没有彻底调查过，但我怀疑这与jQuery处理"checked"等属性有关。

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

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

这将根据文本字段是否为非空来选中或取消选中复选框。

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

此外，在我看来，依赖只有一个字符串的"class"属性是一种脆弱的编码实践。如果你需要对这些字段进行分组，你可以用一个容器元素来完成，你可以从中使用.closest()和.find()来定位伴随字段，也可以用data-属性来表示你当前使用的"类"。

这也会起作用（并减少2行代码）：

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