jQueryはCSSクラスでRadioButtonを選択していませんか？

Question

私は、承認と拒否のラジオボタンを持つレコードのテーブルを持っています。すべてのボタンをクリアするリセットボタンを作成しましたが、「すべて承認」ボタンと「拒否」ボタンをクリックしてすべてのラジオボタンをクリアし、それぞれのCSSクラスのボタンをすべて選択しようとしています。

次のコードでは、警告メッセージが表示されるだけでなく、すべてのラジオボタンのチェックが外されますが、CSSクラスのものはチェックされません。私の研究から、これはうまくいくかのように見えますが、Dev Toolsには何のエラーも見られません。

ここにjQueryがあります。アラートは機能し、すべてのボタンのチェックを外す次の行は機能しますが、.rdoApproveのクラスを持つすべてのボタンを見つけようとする3行目は機能していません。

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

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

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

これは要素を検査するときのブラウザのコードからのものです。私はCSSのクラスを見ることができますし、名前をコピーして貼り付けて、何か間違いがないことを確認しました。

Answer 1

ないで何が起こっているか確認してください、あなたが使用しているものの順序は関係していないようですセレクタ私が指摘唯一の問題は、（小道具のことだった）対のattr（）

$("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) 
 
})

span { 
 
display: block; 
 
}

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

Answer 2

クラスにのみ選択する（すなわち$('.rdoApprove').attr('checked',true)）違いを生むだろうかどうかを確認し

Answer 3

編集：

をproblermがどこにあるか私は本当に、本当に、多分私の英語ので、ない理解していません良い。ですから、あなたは何かを提供することができますか？それは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>