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

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

ただいまの
回答率

89.65%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 2,016
退会済みユーザー

退会済みユーザー

■やりたいこと

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

■いまの状態

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

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

<div>切り替え</div>
<div>
<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />1だけ表示</label>
<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />123表示</label>
</div>

<table>
<thead>

<tr id="0Box">
<th>番号</th>
<th>食べ物</th>
<th>飲み物</th>
</tr>

<tr id="1Box">
<th>1</th>
<th>ぶどう</th>
<th>ワイン</th>
</tr>

</thead>

<tr id="2Box">
<th>2</th>
<th>ホップ</th>
<th>ビール</th>
</tr>

<tr id="2Box">
<th>3</th>
<th>ケーキ</th>
<th>チョコ</th>
</tr>

</table>

<script type="text/javascript">
function entryChange1(){
radio = document.getElementsByName('entryPlan') 
if(radio[0].checked) {
//フォーム
document.getElementById('2Box').style.display = "none";
}else if(radio[1].checked) {
//フォーム
document.getElementById('2Box').style.display = "";
}
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange1;
</script>

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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

 sample

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

.hide{display:none;}
window.onload = function(){
  entryChange();
  Array.prototype.map.call(document.querySelectorAll("[name=entryPlan]"),function(i){
    i.addEventListener('change',function(){entryChange()});
  });
}
function entryChange(){
  var ele=document.querySelectorAll("[name=entryPlan]:checked");
  var v=ele.length>0?ele[0].value:null;
  Array.prototype.map.call(document.querySelectorAll(".boxes"),function(i){
    i.classList.add('hide');
    if(
      (v=='hoge1' && i.classList.contains('box1')) ||
      (v=='hoge2' && i.classList.contains('box2')) ||
      (v=='hoge3' && (i.classList.contains('box1') || i.classList.contains('box2')))
       ){
        i.classList.remove('hide'); 
      }
    });
}
<div>切り替え</div>
<div>
<label><input type="radio" name="entryPlan" value="hoge1" checked>1だけ表示</label>
<label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
<label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
</div>
<table>
<thead>
<tr>
<th>番号</th>
<th>食べ物</th>
<th>飲み物</th>
</tr>
</thead>
<tbody>
<tr class="boxes box1">
<th>1</th>
<th>ぶどう</th>
<th>ワイン</th>
</tr>
<tr class="boxes box2">
<th>2</th>
<th>ホップ</th>
<th>ビール</th>
</tr>
<tr class="boxes box2">
<th>3</th>
<th>ケーキ</th>
<th>チョコ</th>
</tr>
</tbody>
</table>

 追記

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

window.onload = function(){
  entryChange();
  Array.prototype.map.call(document.querySelectorAll("[name=entryPlan]"),function(i){
    i.addEventListener('change',function(){entryChange()});
  });
}
function entryChange(){
  var ele=document.querySelectorAll("[name=entryPlan]:checked");
  for(var i=0;i<ele.length;i++){
    v=ele[i].value;
    Array.prototype.map.call(ele[i].form.querySelectorAll(".boxes"),function(j){
      j.classList.add('hide');
      if(
        (v=='hoge1' && j.classList.contains('box1')) ||
        (v=='hoge2' && j.classList.contains('box2')) ||
        (v=='hoge3' && (j.classList.contains('box1') || j.classList.contains('box2')))
        ){
        j.classList.remove('hide'); 
      }
    });
  }
}
<div>切り替え</div>
<form>
<div>
<label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
<label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
<label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
</div>
<table>
<thead>
<tr>
<th>番号</th>
<th>食べ物</th>
<th>飲み物</th>
</tr>
</thead>
<tbody>
<tr class="boxes box1">
<th>1</th>
<th>ぶどう</th>
<th>ワイン</th>
</tr>
<tr class="boxes box2">
<th>2</th>
<th>ホップ</th>
<th>ビール</th>
</tr>
<tr class="boxes box2">
<th>3</th>
<th>ケーキ</th>
<th>チョコ</th>
</tr>
</tbody>
</table>
</form>
<form>
<div>
<label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
<label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
<label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
</div>
<table>
<thead>
<tr>
<th>番号</th>
<th>食べ物</th>
<th>飲み物</th>
</tr>
</thead>
<tbody>
<tr class="boxes box1">
<th>1</th>
<th>ぶどう</th>
<th>ワイン</th>
</tr>
<tr class="boxes box2">
<th>2</th>
<th>ホップ</th>
<th>ビール</th>
</tr>
<tr class="boxes box2">
<th>3</th>
<th>ケーキ</th>
<th>チョコ</th>
</tr>
</tbody>
</table>
</form>
<form>
<div>
<label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
<label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
<label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
</div>
<table>
<thead>
<tr>
<th>番号</th>
<th>食べ物</th>
<th>飲み物</th>
</tr>
</thead>
<tbody>
<tr class="boxes box1">
<th>1</th>
<th>ぶどう</th>
<th>ワイン</th>
</tr>
<tr class="boxes box2">
<th>2</th>
<th>ホップ</th>
<th>ビール</th>
</tr>
<tr class="boxes box2">
<th>3</th>
<th>ケーキ</th>
<th>チョコ</th>
</tr>
</tbody>
</table>
</form>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/21 22:09

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

    キャンセル

  • 2017/07/21 22:18

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

    キャンセル

  • 2017/07/22 17:12

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/20 13:37

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

    キャンセル

+1

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

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

<div>切り替え</div>
<div>
<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />1だけ表示(3も消えて!)
</label>
<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />123表示</label>
</div>

<table>
<thead>

<tr id="0Box">
<th>番号</th>
<th>食べ物</th>
<th>飲み物</th>
</tr>

<tr id="1Box">
<th>1</th>
<th>ぶどう</th>
<th>ワイン</th>
</tr>

</thead>

<tr id="2Box">
<th>2</th>
<th>ホップ</th>
<th>ビール</th>
</tr>

<tr id="3Box">
<th>3</th>
<th>ケーキ</th>
<th>チョコ</th>
</tr>

</table>

<script type="text/javascript">
function entryChange1() {
  radio = document.getElementsByName('entryPlan') 
  if (radio[0].checked) {
    //フォーム
    document.getElementById('2Box').style.display = "none";
    document.getElementById('3Box').style.display = "none";
  } else if(radio[1].checked) {
    //フォーム
    document.getElementById('2Box').style.display = "";
    document.getElementById('3Box').style.display = "";
  }
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange1;
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/20 13:36

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

    キャンセル

  • 2017/07/20 13:55

    というのはですね、たとえば、

    ①2Box、3Box、4Box、、というクラスは付けず、そのあたりをまるごと<div class="Box-wrap">として囲えば、javascriptの表記は1行で済ませたりするのかな、とか、または

    ➁2Box、3Box、4Box、、というクラスはつけるものの、javascript側で何か1行で済ませられるような書き方はないのかな、とか、

    そんなことをふと思ったものでして。

    キャンセル

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

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる