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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

263閲覧

チェックボックスのグループごとにアクティブにしたい

flyingHigh

総合スコア41

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/25 19:29

チェックボックスaaa,ccc,gggがあり、
aaaにチェックを入れるとbbbが、
cccにチェックを入れるとddd,eee,fffが、
gggにチェックを入れるとhhh,iii がアクティブになります。

jsでまとめて書きたいのですが、現状のjsでは
aaaにチェックを入れるとbbbだけでなく、
ddd,eee,fff, hhh,iiiもアクティブになってしまいます。

クラス名:parent--01内のinputをチェックするとnest--01がアクティブに
クラス名:parent--02内のinputをチェックするとnest--02がアクティブに
クラス名:parent--03内のinputをチェックするとnest--03がアクティブに
逆にチェックを外すと非アクティブに というように
それぞれのグループのみをアクティブ/非アクティブにするには
どのようにすればよろしいでしょうか。

HTML

1<div><span class="select--area parent--01"> 2 <input type="checkbox" name="aaa1" value="1" id="aaa1" class="checkSet" checked="checked"> <label for="aaa1" class="text-checkbox ml-30p"> 3 <span>aaa</span> 4 </label> 5 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 6 7 </a> 8 9 10 11 <span class="select--area--sub nest--01"> 12 <input type="checkbox" name="bbb1" value="1" id="bbb1" class="checkSet"> <label for="bbb1" class="text-checkbox ml-30p"> 13 <span>bbb</span> 14 </label> 15 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 16 </a> 17 </span> 18 </span> 19 </div> 20 21 22 <div><span class="select--area parent--02"> 23 <input type="checkbox" name="aaa1" value="1" id="ccc1" class="checkSet" checked="checked"> <label for="ccc1" class="text-checkbox ml-30p"> 24 <span>ccc</span> 25 </label> 26 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 27 28 </a> 29 30 31 32 <span class="select--area--sub nest--02"> 33 <input type="checkbox" name="bbb1" value="1" id="ddd1" class="checkSet"> <label for="ddd1" class="text-checkbox ml-30p"> 34 <span>ddd</span> 35 </label> 36 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 37 </a> 38 </span> 39 40 <span class="select--area--sub nest--02"> 41 <input type="checkbox" name="bbb1" value="1" id="eee1" class="checkSet"> <label for="eee1" class="text-checkbox ml-30p"> 42 <span>eee</span> 43 </label> 44 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 45 </a> 46 </span> 47 48 <span class="select--area--sub nest--02"> 49 <input type="checkbox" name="bbb1" value="1" id="fff1" class="checkSet"> <label for="fff1" class="text-checkbox ml-30p"> 50 <span>fff</span> 51 </label> 52 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 53 </a> 54 </span> 55 </span> 56 </div> 57 58 <div><span class="select--area parent--03"> 59 <input type="checkbox" name="aaa1" value="1" id="ggg1" class="checkSet" checked="checked"> <label for="ggg1" class="text-checkbox ml-30p"> 60 <span>ggg</span> 61 </label> 62 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 63 64 </a> 65 66 67 68 <span class="select--area--sub nest--03"> 69 <input type="checkbox" name="bbb1" value="1" id="hhh1" class="checkSet"> <label for="hhh1" class="text-checkbox ml-30p"> 70 <span>hhh</span> 71 </label> 72 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 73 </a> 74 </span> 75 76 77 78 <span class="select--area--sub nest--03"> 79 <input type="checkbox" name="bbb1" value="1" id="iii1" class="checkSet"> <label for="iii1" class="text-checkbox ml-30p"> 80 <span>iii</span> 81 </label> 82 <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title=""> 83 </a> 84 </span> 85 </span> 86 87 </div> 88

CSS

1span[class*="parent--"] label>span{ 2 font-size:18px; 3 font-weight:bold; 4} 5span[class*="nest--"] label>span{ 6 font-size:14px; 7 font-weight:normal; 8} 9span[class*="nest--"].active{ 10 color:#ff0000; 11}

JavaScript(jQuery)

1$(function(){ 2 3 $('span[class*="parent--"]>input').on('change', function () { 4 $('span[class*="nest--"]>input').prop('disabled', !$(this).prop('checked')); 5 $('span[class*="nest--"]>input').toggleClass('active',$(this).is(':checked')); 6 }).trigger('change'); 7 8 9 10}); 11

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

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

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

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

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

kyoya0819

2019/09/25 23:10

無駄な記述が多いです。 最低限の記述にしてください。
flyingHigh

2019/10/15 01:16

失礼しました。 次回よりそのように努めます。
kyoya0819

2019/10/15 02:42

質問は編集可能です。 もし解決していないようでしたら編集していただけるとありがたいです。
guest

回答2

0

ベストアンサー

<fieldset>を使うと若干処理が簡単になります。 [https://developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset](https://developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset)

CSS

1span[class*="parent--"]>input ~ fieldset { 2 display: inline; 3 margin: 0; 4 padding: 0; 5 border-style: none; 6} 7 8/* IE がなければ :enabled でよい */ 9span[class*="parent--"]>input ~ fieldset:not([disabled]) span[class*="nest--"] { 10 color: #ff0000; 11}

jQuery

1 $('span[class*="parent--"]>input').on('change', function(event) { 2 const target = $(event.target); 3 const disabled = !target.prop('checked'); 4 target.siblings('fieldset').prop('disabled', disabled); 5 }).trigger('change');

投稿2019/09/27 01:37

x_x

総合スコア13749

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

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

0

.select--areaまでさかのぼってからfindすればよいでしょう
またクラスのつける場所がinputではなくその上のspanですよね?

javascript

1$(function(){ 2 $('span[class*="parent--"]>input').on('change', function () { 3 var flg=$(this).prop('checked'); 4 $(this).closest('.select--area') 5 .find('span[class*="nest--"]').toggleClass('active',flg) 6 .find('>input').prop('disabled', !flg) 7 }).trigger('change'); 8});

投稿2019/09/26 00:52

編集2019/09/26 00:53
yambejp

総合スコア114572

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

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

flyingHigh

2019/10/15 01:18

たしかに、個々から親をたどって見ればよいのですね。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問