現在、ボタン1を押すとradioにチェックが入りbox01の色が変わり、box02にチェックと色があった場合は消える。また、別のボタン1を押すとradioにチェックが入りbox01の色が変わり、他のボタン1のチェックと色が消える。
ボタン2を押すとradioにチェックが入りbox02の色が変わり、box01にチェックと色があった場合は消えるといった下記の様なものを作っています。ボタン1のみは交互に切り替えるため全体を.eachでやっています。
ボタン2を押した後にボタン1を押すと上のような動作になるのですが、ボタン1を押した後にボタン2を押しても何の変化も起きずに悩んでいます。ボタン1の交互切り替えは動いています。
もしかして、if ($check01.length)の中で$("input:radio[name='bbb']:checked").prop("checked", false);にしているため、box01のボタンを押した後にelse if ($check02.length) が動いていないのでしょうか?
.prop("checked", false)をしているので:checkedに当てはまらないって事だと思うのですが。
もしわかる方がいらっしゃいましたらお教え頂けると幸いです。
よろしくお願い致します。
jquery
1var $check01= $(this).find("input:radio[name='aaa']:checked"); 2var $check02= $(this).find("input:radio[name='bbb']:checked"); 3 4var update = function() { 5$(".group").each(function(){ 6if ($check01.length) { 7$(this).children(".box01").addClass("checked") 8$("input:radio[name='bbb']:checked").prop("checked", false); 9} 10else if ($check02.length) { 11$(this).children(".box02").addClass("checked") 12$("input:radio[name='aaa']:checked").prop("checked", false); 13} 14}); 15};
HTML
1<div class="group"> 2<div class="box01"> 3<button type="button" class="btn">ボタン1</button> 4</div> 5<div class="box_radio"> 6<label><input type="radio" name="aaa">チェック1</label> 7</div> 8</div> 9<div class="group"> 10<div class="box01"> 11<button type="button" class="btn">ボタン1</button> 12</div> 13<div class="box_radio"> 14<label><input type="radio" name="aaa">チェック1</label> 15</div> 16</div> 17<div class="group"> 18<div class="box01"> 19<button type="button" class="btn">ボタン1</button> 20</div> 21<div class="box_radio"> 22<label><input type="radio" name="aaa">チェック1</label> 23</div> 24</div> 25 26<div class="group"> 27<div class="box02"> 28<button type="button" class="btn">ボタン2</button> 29</div> 30<div class="box_radio"> 31<label><input type="radio" name="bbb">チェック1</label> 32</div> 33</div>
回答1件
あなたの回答
tips
プレビュー