質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2761閲覧

("input:checked").lengthの前に.prop("checked", false)した場合

Cake

総合スコア13

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2016/05/27 10:13

編集2016/05/27 10:42

現在、ボタン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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shi_ue

2016/05/27 10:37 編集

この上のJavascriptはどこに付いてるんですか? $('.box02 button') のclickにかな? それにしては、updateというfunctionを作ってるし、なぞな構造ですね。部分的に切り出すにしても、ちゃんと意味の通るようにしましょうよ。$el とかあるし。
guest

回答1

0

ベストアンサー

無駄な記述が多かったので、簡略化しました。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 $("button").on('click', function () { 10 $(".box").css("background-color", ""); 11 $(this).parent('.box').css("background-color", "red"); 12 $(this).next('input:radio').prop('checked', true); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 <div class="group"> 19 <div class="box"> 20 <button type="button">ボタン</button> 21 <input type="radio" name="check" /> ラジオボタン 22 </div> 23 <div class="box"> 24 <button type="button">ボタン</button> 25 <input type="radio" name="check" /> ラジオボタン 26 </div> 27 <div class="box"> 28 <button type="button">ボタン</button> 29 <input type="radio" name="check" /> ラジオボタン 30 </div> 31 <div class="box"> 32 <button type="button">ボタン</button> 33 <input type="radio" name="check" /> ラジオボタン 34 </div> 35 </div> 36 </body> 37</html>

投稿2016/05/27 10:38

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問