在JQuery中，爲什麼我不能在調用removeAttr（「checked」）後檢查複選框？

我想檢查一個複選框，如果某個輸入字段被填充。在JQuery中，爲什麼我不能在調用removeAttr（「checked」）後檢查複選框？

下面的解決方案最初工作。輸入輸入後，該複選框被正確選中。輸入被刪除後，複選框未被選中。但再次輸入輸入後，複選框不會被檢查。

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

來源

2014-09-23 Nate Reed

使用道具（「選中」，真/假），而不是ATTR – Sunand 2014-09-23 19:55:59

VAL，操作之後，很可能觸發您的其他聲明。如果要查看「val」的值是什麼，我會在你之前做一個控制檯日誌。 – dudewad 2014-09-23 19:56:08

這似乎在這裏正常工作：http://jsfiddle.net/m4u8ge2h/ - 但我在本地嘗試它可以repro錯誤，所以沒關係， – 2014-09-23 19:56:19

通過.attr()對屬性進行操作是什麼讓你感到困惑;我還沒有徹底調查過，但我懷疑它與jQuery所做的雜耍有關，比如「checked」。

您可以用替換整個if聲明：

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

這將檢查或根據作爲文本字段是否非空取消選中該複選框。

請注意，因爲您觸發了任何:input元素的處理程序，當您從複選框中收到「模糊」事件時，它也會觸發。

另外，在我看來，這是一種脆弱的編碼習慣，依靠只有一個字符串的「class」屬性。如果您需要對這些字段進行分組，您可以使用容器元素（可使用.closest()和.find()來定位伴隨字段），或者使用data-屬性來確定當前使用的「類」。

來源

2014-09-23 19:59:51 Pointy

@showdev是的，這是有道理的;我只使用'.attr（）'，當我真的知道我需要它（例如獲取unmolested「href」或「action」屬性值），所以我忘記了細節:)在這種情況下，我認爲這是刪除「checked 「導致問題的屬性。 – Pointy 2014-09-23 20:03:11

修復了它。感謝您使用類屬性來做到這一點的額外反饋。 – 2014-09-23 20:08:14

@NateReed很高興它爲你工作。我已經足夠年輕了，可以讓每一個錯誤都成爲可能，所以我喜歡在這樣的情況下分享:) – Pointy 2014-09-23 20:09:29

這也將工作（並佔用2個較少的代碼行）：

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

來源

2014-09-23 20:41:34 ray9209

在JQuery中，爲什麼我不能在調用removeAttr（「checked」）後檢查複選框？

回答

相關問題