jQuery没有按CSS类选择RadioButton？

Question

我有一个记录表，其中包含Approve和Deny单选按钮。我创建了一个重置​​按钮来清除所有可用的按钮，但我试图获得“全部批准”和“全部拒绝”按钮以清除所有单选按钮，然后选择相应CSS类中任何一个的所有按钮。

使用以下代码，我可以看到Alert消息，并且它将取消选中所有的radiobuttons，但它不会检查具有CSS类的那些。根据我的研究，这看起来好像应该有效，我在Dev Tools中看不到任何错误。

这是jQuery。警报有效，下一行取消选中所有按钮，但第三行尝试查找所有按钮的类别为.rdoApprove似乎不起作用。

$("#approveAll").click(function () {
    alert("approve clicked");

    $('input:radio').attr('checked', false);

    $('input:radio.rdoApprove').attr('checked', true);
});

当我检查元素时，这是来自浏览器中的代码。我可以看到CSS类，我复制并粘贴了名称，以确保我没有拼错。

Answer 1

不确定发生了什么，看起来您使用选择器的顺序似乎并不重要。我注意到的唯一问题是prop（）与attr（）

的问题

＆＃13;

＆＃13;

$("input:radio").on("click", function(){
  console.log($(this).prop("class") );
});

$(".choose-male").on("click", function(){
  $("input:radio.genderBtn-male").prop("checked", true)
})

$(".choose-female").on("click", function(){
  $("input.genderBtn-female:radio").prop("checked", true)
})

$(".choose-other").on("click", function(){
  $("input.genderBtn-other[type='radio']").prop("checked", true)
})

＆＃13;

span {
display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class="genderBtn-male" type="radio" name="gender" value="male"> Male<br>
  <input class="genderBtn-female" type="radio" name="gender" value="female"> Female<br>
  <input class="genderBtn-other"type="radio" name="gender" value="other"> Other  
</form> 
<hr />

<span class="choose-male">Male?</span>
<span class="choose-female">Female?</span>
<span class="choose-other">not quite sure?</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

查看是否仅选择Class会产生影响（即$('.rdoApprove').attr('checked',true)）

Answer 3

已编辑：

我真的不明白问题出在哪里，也许是因为我的英语不太好。那么你能在jsfiddle中通过代码（我们试试）提供更清楚的解释吗？

但也许你可以试试这个：

$("#approveAll").click(function () {
    alert("approve clicked");

   $('input:radio').each(function(i){
      if( $(this).hasClass('rdoApprove') ){
        $(this).attr('checked','checked');
      } else {
        $(this).removeAttr('checked');
      }
   });

});

LIVE：

$("#approveAll").click(function () {
    alert("approve clicked");

   $('input:radio').each(function(i){
      if( $(this).hasClass('rdoApprove') ){
        $(this).attr('checked','checked');
      } else {
        $(this).removeAttr('checked');
      }
   });
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<input class="genderBtn-male" type="radio" name="gender" value="male"/> Male<br/>
  <input class="genderBtn-female rdoApprove" type="radio" name="gender" value="female"/> Female<br/>
  <input class="genderBtn-other" type="radio" name="gender" value="other"/> Other 
<br/><br/>
<button id="approveAll">CLICK this approveAll button</button>