ラジオボタン変更イ​​ベントの後にチェックボックスがチェックされない

Question

チェックボックスと2つのラジオボタンがあります。 ラジオの変更イベントで、チェックボックスのチェック属性をtrueにしています。 これは1回だけ動作します。

Demo

ところで醜いと良いチェックボックス 3.toggel（効果なし:(使用済み

のチェックを外し、それを複製するステップ、醜い上 1.クリック（チェックボックスがチェックされている） 2この上の多くの時間が、何が起こっているか把握することができませんでし

Answer 1

次のようにコードを更新します。

1. checkedプロパティを更新するにはattr()メソッドの代わりにprop()メソッドを使用します。
2. 変更イベントハンドラを共通にバインドし、選択したラジオボタンの値に基づいてプロパティを更新します。

// or select based on the name attribute 
 
// `$('input[type=radio][name="gender"]')` 
 
$('input[type=radio]').on('change', function() { 
 
    $('.xyz').prop('checked', this.value == 'bad'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="vehicle" value="Car" class="xyz"> I have a car<br> 
 

 

 
<input type="radio" name="gender" value="good"> Good Oned<br> 
 
<input type="radio" name="gender" value="bad"> Ugly<br>

Answer 2

試してみてください。この状態.clickedラジオボタンの値が悪い場合クリックした真falseはに他の部分に表示されている代わりにattr

のprop()方法を使用する必要があります。あなたattrに確認更新済み

なぜ機能しませんか？
あなたセレクタは。あなたは、あなたが他のラジオボタンをクリックした場合にのみ$('input[type=radio][value = "bad"]') .itsは チェックボックスがオフではなかっただけで選択し、両方の。だからのために悪くないラジオに ボタンを重視持って間違っていた

$(document).ready(function() { 
 
    $('input[type=radio]').on('change', function() { 
 
    $('.xyz').prop('checked', $(this).val().trim() == 'bad'); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<input type="checkbox" name="vehicle" value="Car" class="xyz"> I have a car<br> 
 
<input type="radio" name="gender" value="good"> Good Oned<br> 
 
<input type="radio" name="gender" value="bad"> Ugly<br><br>