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

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

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

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

HTML

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

Q&A

解決済

3回答

4633閲覧

【js】チェックボックスで表示OR非表示が切り替わりません。。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

0グッド

1クリップ

投稿2017/07/20 04:24

###■やりたいこと
チェックボックス選択でテーブルの行の、表示OR非表示を切り替えたいです。

###■いまの状態
左側(1だけ表示)にチェックが入っているときに、3の行が消えてくれないのです!
2の行はきちんと消えてくれています。
https://jsfiddle.net/2v3ydbaf/

上のリンク先にもありますが、コードは次のように書いています。

HTML

1<div>切り替え</div> 2<div> 3<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />1だけ表示</label> 4<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />123表示</label> 5</div> 6 7<table> 8<thead> 9 10<tr id="0Box"> 11<th>番号</th> 12<th>食べ物</th> 13<th>飲み物</th> 14</tr> 15 16<tr id="1Box"> 17<th>1</th> 18<th>ぶどう</th> 19<th>ワイン</th> 20</tr> 21 22</thead> 23 24<tr id="2Box"> 25<th>2</th> 26<th>ホップ</th> 27<th>ビール</th> 28</tr> 29 30<tr id="2Box"> 31<th>3</th> 32<th>ケーキ</th> 33<th>チョコ</th> 34</tr> 35 36</table> 37 38<script type="text/javascript"> 39function entryChange1(){ 40radio = document.getElementsByName('entryPlan') 41if(radio[0].checked) { 42//フォーム 43document.getElementById('2Box').style.display = "none"; 44}else if(radio[1].checked) { 45//フォーム 46document.getElementById('2Box').style.display = ""; 47} 48} 49//オンロードさせ、リロード時に選択を保持 50window.onload = entryChange1; 51</script>

ご覧のように、javascriptで2Boxの表示OR非表示の切り替えを書いているつもりなのですが、なぜ、3の行は消えてくれないのでしょうか?
ちなみにこちらのサイトを参考にして、2時間くらいがんばった結果が上記の状態です。笑
(http://5am.jp/javascript/form_change_javascript/)

私はjavascriptをいじくるのは、人生で3回目くらいです。
ご意見よろしくお願い致します。

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

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

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

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

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

guest

回答3

0

ベストアンサー

まず、命題はチェックボックスといっていますがラジオボタンですね
間違いはidを利用して複数箇所処理をしようとしていることです
複数のタグに同じidを振ることはできませんので
どうしてもということであればclassを利用して下さい

sample

一応サンプルつけておきます

CSS

1.hide{display:none;}

javascript

1window.onload = function(){ 2 entryChange(); 3 Array.prototype.map.call(document.querySelectorAll("[name=entryPlan]"),function(i){ 4 i.addEventListener('change',function(){entryChange()}); 5 }); 6} 7function entryChange(){ 8 var ele=document.querySelectorAll("[name=entryPlan]:checked"); 9 var v=ele.length>0?ele[0].value:null; 10 Array.prototype.map.call(document.querySelectorAll(".boxes"),function(i){ 11 i.classList.add('hide'); 12 if( 13 (v=='hoge1' && i.classList.contains('box1')) || 14 (v=='hoge2' && i.classList.contains('box2')) || 15 (v=='hoge3' && (i.classList.contains('box1') || i.classList.contains('box2'))) 16 ){ 17 i.classList.remove('hide'); 18 } 19 }); 20}

HTML

1<div>切り替え</div> 2<div> 3<label><input type="radio" name="entryPlan" value="hoge1" checked>1だけ表示</label> 4<label><input type="radio" name="entryPlan" value="hoge2">23表示</label> 5<label><input type="radio" name="entryPlan" value="hoge3">123表示</label> 6</div> 7<table> 8<thead> 9<tr> 10<th>番号</th> 11<th>食べ物</th> 12<th>飲み物</th> 13</tr> 14</thead> 15<tbody> 16<tr class="boxes box1"> 17<th>1</th> 18<th>ぶどう</th> 19<th>ワイン</th> 20</tr> 21<tr class="boxes box2"> 22<th>2</th> 23<th>ホップ</th> 24<th>ビール</th> 25</tr> 26<tr class="boxes box2"> 27<th>3</th> 28<th>ケーキ</th> 29<th>チョコ</th> 30</tr> 31</tbody> 32</table> 33

追記

ラジオボタンとテーブルの組み合わせが複数ある場合は、formでグルーピングしてください

javascript

1window.onload = function(){ 2 entryChange(); 3 Array.prototype.map.call(document.querySelectorAll("[name=entryPlan]"),function(i){ 4 i.addEventListener('change',function(){entryChange()}); 5 }); 6} 7function entryChange(){ 8 var ele=document.querySelectorAll("[name=entryPlan]:checked"); 9 for(var i=0;i<ele.length;i++){ 10 v=ele[i].value; 11 Array.prototype.map.call(ele[i].form.querySelectorAll(".boxes"),function(j){ 12 j.classList.add('hide'); 13 if( 14 (v=='hoge1' && j.classList.contains('box1')) || 15 (v=='hoge2' && j.classList.contains('box2')) || 16 (v=='hoge3' && (j.classList.contains('box1') || j.classList.contains('box2'))) 17 ){ 18 j.classList.remove('hide'); 19 } 20 }); 21 } 22}

HTML

1<div>切り替え</div> 2<form> 3<div> 4<label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label> 5<label><input type="radio" name="entryPlan" value="hoge2">23表示</label> 6<label><input type="radio" name="entryPlan" value="hoge3">123表示</label> 7</div> 8<table> 9<thead> 10<tr> 11<th>番号</th> 12<th>食べ物</th> 13<th>飲み物</th> 14</tr> 15</thead> 16<tbody> 17<tr class="boxes box1"> 18<th>1</th> 19<th>ぶどう</th> 20<th>ワイン</th> 21</tr> 22<tr class="boxes box2"> 23<th>2</th> 24<th>ホップ</th> 25<th>ビール</th> 26</tr> 27<tr class="boxes box2"> 28<th>3</th> 29<th>ケーキ</th> 30<th>チョコ</th> 31</tr> 32</tbody> 33</table> 34</form> 35<form> 36<div> 37<label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label> 38<label><input type="radio" name="entryPlan" value="hoge2">23表示</label> 39<label><input type="radio" name="entryPlan" value="hoge3">123表示</label> 40</div> 41<table> 42<thead> 43<tr> 44<th>番号</th> 45<th>食べ物</th> 46<th>飲み物</th> 47</tr> 48</thead> 49<tbody> 50<tr class="boxes box1"> 51<th>1</th> 52<th>ぶどう</th> 53<th>ワイン</th> 54</tr> 55<tr class="boxes box2"> 56<th>2</th> 57<th>ホップ</th> 58<th>ビール</th> 59</tr> 60<tr class="boxes box2"> 61<th>3</th> 62<th>ケーキ</th> 63<th>チョコ</th> 64</tr> 65</tbody> 66</table> 67</form> 68<form> 69<div> 70<label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label> 71<label><input type="radio" name="entryPlan" value="hoge2">23表示</label> 72<label><input type="radio" name="entryPlan" value="hoge3">123表示</label> 73</div> 74<table> 75<thead> 76<tr> 77<th>番号</th> 78<th>食べ物</th> 79<th>飲み物</th> 80</tr> 81</thead> 82<tbody> 83<tr class="boxes box1"> 84<th>1</th> 85<th>ぶどう</th> 86<th>ワイン</th> 87</tr> 88<tr class="boxes box2"> 89<th>2</th> 90<th>ホップ</th> 91<th>ビール</th> 92</tr> 93<tr class="boxes box2"> 94<th>3</th> 95<th>ケーキ</th> 96<th>チョコ</th> 97</tr> 98</tbody> 99</table> 100</form> 101

投稿2017/07/20 04:37

編集2017/07/21 12:11
yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2017/07/20 05:14

ありがとうございます!たすかりました!! idをclassに変えた後、 getElementById を getElementsByClassName にしても何も起こってくれず、困り果てていたところです。笑
退会済みユーザー

退会済みユーザー

2017/07/20 05:16

しかも「23表示」の機能までつけてくれたのですね! 感動を呼ぶ接客(←何様w)とはこのことですな。 ありがとうございます。早速サイトに実装してみます!
退会済みユーザー

退会済みユーザー

2017/07/20 06:41

すごくわかりやすかったです。いろいろ試しているうちに、応用が利くようにわかりやすく書かれていることに気づき、びっくりしました。どうもありがとうございました!
退会済みユーザー

退会済みユーザー

2017/07/21 09:41

たびたび申し訳ございません。これってテーブルが複数ある場合だとどのように書けばよいのでしょうか? 今の状態はこうなっております。 https://jsfiddle.net/q9186k1x/ ご覧のように、「同じラジオボタンの選択で、2つのテーブルが切り替わってしまうの」状態です。 jsを同じように2つ書いたり、HTMLのIDを変えたり朝から試行錯誤してきたのですが、、さすがにギブアップです。。 追加質問ですみません。いちおうきちんと質問立てておきます。
yambejp

2017/07/21 12:11

複数テーブル対応版を追記しときました
退会済みユーザー

退会済みユーザー

2017/07/21 12:51

うわー!できてるーー!!爆っっ笑しました!!ホントにめちゃくちゃ苦労していたのに、これだけかーい!笑 いやしかしこのシンプルさこそ、一流が苦労の果てにたどり着く答えなのでしょうね。。 大変だろうと思って別途質問を立てておりましたが、追加質問へのご返答、心から感謝いたします。 と、ところが、、 なんとこちら、wordpressの投稿画面にそのまま書いても機能しない様子です。前回教えていただいた1つだけのテーブルは、投稿画面のテキストエリアにそのまま書いても平気でした。 wordpressで勝手に書かれるPタグなどのせいかな?と思いましたが、それらが表示されないように設定してもやはりラジオボタンは機能しませんでした。(;_:) なかなか厄介ですね。。どうしてでしょうか?
yambejp

2017/07/21 13:05

>wordpressの投稿画面にそのまま書いても機能しない あら、なんでしょうね。 なにかの記述が競合しているのかもしれません。 ブラウザのF12開発ツールでエラーを確認しながらやるとよいでしょう。 実際、formで分けなくてはいけない理由は、 ラジオボタンを同じnameで設定すると、競合してしまうことが大きいです。 wordpress自体使う機会がないので具体的な問題はちょっと指摘できないです、あしからず。 ちなみに複雑になってくるとオブジェクトの掴み方が柔軟な jQueryなどでやったほうが簡単で見やすいです。 (わたしはjQueryが嫌いなのであえてピュアなjavascriptで例示しました)
退会済みユーザー

退会済みユーザー

2017/07/21 13:09

とんでもないです!なんども本当に感謝です。 もしよろしければビットコインアドレス教えてください。 明日のランチ代1000円(だけw)お送りいたします♪
退会済みユーザー

退会済みユーザー

2017/07/21 13:18

他のテーマだときちんと機能しました!どうやら私の使っているテーマ「nirvana」だけの問題のようです。そりゃ、わかるわけありませんね。笑 なのでyambejpさまのご回答はパーフェクトでございました。ご報告まで。
退会済みユーザー

退会済みユーザー

2017/07/22 08:12

プラグイン「Simple Custom CSS and JS」で当該jsを書くことによってどのテーマでもjsが作動するようになりました。やっと解決です。これからwordpressでjsが作動しないことがありましたらぜひおためしあれ(^◇^)
guest

0

IDが"2Box"の要素が2つあるからです。
IDはそのページの中で一意でないといけません。

以下のように3つ目のBoxに"3Box"というIDをつけて、"2Box"と"3Box"を消すようにすればとりあえず消えます。
ただ、このケースでは、IDよりclassで指定したほうが良いと思います。

html

1<div>切り替え</div> 2<div> 3<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />1だけ表示(3も消えて!) 4</label> 5<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />123表示</label> 6</div> 7 8<table> 9<thead> 10 11<tr id="0Box"> 12<th>番号</th> 13<th>食べ物</th> 14<th>飲み物</th> 15</tr> 16 17<tr id="1Box"> 18<th>1</th> 19<th>ぶどう</th> 20<th>ワイン</th> 21</tr> 22 23</thead> 24 25<tr id="2Box"> 26<th>2</th> 27<th>ホップ</th> 28<th>ビール</th> 29</tr> 30 31<tr id="3Box"> 32<th>3</th> 33<th>ケーキ</th> 34<th>チョコ</th> 35</tr> 36 37</table> 38 39<script type="text/javascript"> 40function entryChange1() { 41 radio = document.getElementsByName('entryPlan') 42 if (radio[0].checked) { 43 //フォーム 44 document.getElementById('2Box').style.display = "none"; 45 document.getElementById('3Box').style.display = "none"; 46 } else if(radio[1].checked) { 47 //フォーム 48 document.getElementById('2Box').style.display = ""; 49 document.getElementById('3Box').style.display = ""; 50 } 51} 52//オンロードさせ、リロード時に選択を保持 53window.onload = entryChange1; 54</script>

投稿2017/07/20 04:33

HiroakiOhtake

総合スコア19

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

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

退会済みユーザー

退会済みユーザー

2017/07/20 04:36

そういうことだったのですね。どうもありがとうございます。 ところで、、 実はこちらのテーブル、行があと30行くらいあるのですけれど、その場合は、2Box、3Box、4Box、、と全てに番号を振ってあげないとダメなのでしょうか?汗
退会済みユーザー

退会済みユーザー

2017/07/20 04:55

というのはですね、たとえば、 ①2Box、3Box、4Box、、というクラスは付けず、そのあたりをまるごと<div class="Box-wrap">として囲えば、javascriptの表記は1行で済ませたりするのかな、とか、または ➁2Box、3Box、4Box、、というクラスはつけるものの、javascript側で何か1行で済ませられるような書き方はないのかな、とか、 そんなことをふと思ったものでして。
guest

0

id属性で指定できる値は、重複してはいけません。
同じ値にしたいのであれば、class属性を利用するなどしてみてください。

投稿2017/07/20 04:32

mr-hisa-child

総合スコア294

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

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

退会済みユーザー

退会済みユーザー

2017/07/20 04:37

なるほど。ありがとうございます。やってみます。 そもそもidとclassの使い分けから勉強せねばなりませんね。(>_<) なんとなく使っておりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問