ラジオボタンのｊｓ切り替えと、テーブルの連携（複数ある場合）ができません。。

Question

###■やりたいこと
複数のテーブルが、ラジオボタン選択でぞれぞれ切り替わるようにしたいです。

現状では、
➀２つとも切り替わってしまうか、
➁後半だけしか切り替わらないか、
という状態なのです。
###■➀２つとも切り替わってしまう
ご覧のように、２つのテーブルが、同じラジオボタンで切り替わってしまいます。↓
https://jsfiddle.net/q9186k1x/
上記URLでは次のように書いてあります。

<label><input type="radio" name="entryPlan" value="hoge1" checked>1だけ表示</label>
<label><input type="radio" name="entryPlan" value="hoge2">12表示</label>
<label><input type="radio" name="entryPlan" value="hoge3">全て表示</label>
</div>
<table class="pink">
<thead>
<tr>
<th style="padding: 10px;">番号</th>
<th style="padding: 10px;" colspan="2">素材</th>
<th style="padding: 10px;" colspan="2">飲み物</th>
</tr>
</thead>
<tbody>
<tr class="boxes japanese box-a">
<td>1</td>
<td>ぶどう</td>
<td>ぶどう</td>
<td>ワイン</td>
<td>ワイン</td>
</tr>
<tr class="boxes nonjapanese box-b">
<td>2</td>
<td>ホップ</td>
<td>ホップ</td>
<td>ビール</td>
<td>ビール</td>
</tr>
<tr class="boxes japanese box-c">
<td>3</td>
<td>おこめ</td>
<td>おこめ</td>
<td>日本酒</td>
<td>日本酒</td>
</tr>
</tbody>
</table>


<div>
<label><input type="radio" name="entryPlan" value="hoge1" checked>1だけ表示</label>
<label><input type="radio" name="entryPlan" value="hoge2">12表示</label>
<label><input type="radio" name="entryPlan" value="hoge3">全て表示</label>
</div>
<table class="green">
<thead>
<tr>
<th style="padding: 10px;">番号</th>
<th style="padding: 10px;" colspan="2">味</th>
<th style="padding: 10px;" colspan="2">のど越し</th>
</tr>
</thead>
<tbody>
<tr class="boxes japanese box-a">
<td>A</td>
<td>あまい</td>
<td>あまい</td>
<td>すっきり</td>
<td>すっきり</td>
</tr>
<tr class="boxes nonjapanese box-b">
<td>B</td>
<td>からい</td>
<td>からい</td>
<td>がつん</td>
<td>がつん</td>
</tr>
<tr class="boxes japanese box-c">
<td>C</td>
<td>にがい</td>
<td>にがい</td>
<td>ねっとり</td>
<td>ねっとり</td>
</tr>
</tbody>
</table>


<script type="text/javascript">
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('box-a')) ||
      (v=='hoge2' && i.classList.contains('japanese')) ||
      (v=='hoge3' && (i.classList.contains('box-a') || i.classList.contains('japanese') || i.classList.contains('nonjapanese')))
       ){
        i.classList.remove('hide'); 
      }
    });
}
</script>

###■➁後半だけしか切り替わらない
HTMLとjsのそれらしき部分を下記のように変えてみました。
朝から相当がんばりました。笑

２つjsを書いているのですが、2つ目の方しか機能しない様子です。
https://jsfiddle.net/q9186k1x/1/
上記URLでは次のように書いてあります。

<div>
<label><input type="radio" name="entryPlan-number" value="hoge1" checked>1だけ表示</label>
<label><input type="radio" name="entryPlan-number" value="hoge2">12表示</label>
<label><input type="radio" name="entryPlan-number" value="hoge3">全て表示</label>
</div>
<table class="pink">
<thead>
<tr>
<th style="padding: 10px;">number</th>
<th style="padding: 10px;" colspan="2">素材</th>
<th style="padding: 10px;" colspan="2">飲み物</th>
</tr>
</thead>
<tbody>
<tr class="boxes box-japanese-number box-number-1">
<td>1</td>
<td>ぶどう</td>
<td>ぶどう</td>
<td>ワイン</td>
<td>ワイン</td>
</tr>
<tr class="boxes box-japanese-number box-number-2">
<td>2</td>
<td>ホップ</td>
<td>ホップ</td>
<td>ビール</td>
<td>ビール</td>
</tr>
<tr class="boxes box-nonjapanese-number box-number-3">
<td>3</td>
<td>おこめ</td>
<td>おこめ</td>
<td>日本酒</td>
<td>日本酒</td>
</tr>
</tbody>
</table>


<div>
<label><input type="radio" name="entryPlan-alphabet" value="hoge4" checked>Aだけ表示</label>
<label><input type="radio" name="entryPlan-alphabet" value="hoge5">AB表示</label>
<label><input type="radio" name="entryPlan-alphabet" value="hoge6">全て表示</label>
</div>
<table class="green">
<thead>
<tr>
<th style="padding: 10px;">alphabet</th>
<th style="padding: 10px;" colspan="2">味</th>
<th style="padding: 10px;" colspan="2">のど越し</th>
</tr>
</thead>
<tbody>
<tr class="boxes box-japanese-alphabet box-alphabet-a">
<td>A</td>
<td>あまい</td>
<td>あまい</td>
<td>すっきり</td>
<td>すっきり</td>
</tr>
<tr class="boxes box-japanese-alphabet box-alphabet-b">
<td>B</td>
<td>からい</td>
<td>からい</td>
<td>がつん</td>
<td>がつん</td>
</tr>
<tr class="boxes box-nonjapanese-alphabet box-alphabet-c">
<td>C</td>
<td>にがい</td>
<td>にがい</td>
<td>ねっとり</td>
<td>ねっとり</td>
</tr>
</tbody>
</table>


<script type="text/javascript">
window.onload = function(){
  entryChange();
  Array.prototype.map.call(document.querySelectorAll("[name=entryPlan-number]"),function(i){
    i.addEventListener('change',function(){entryChange()});
  });
}
function entryChange(){
  var ele=document.querySelectorAll("[name=entryPlan-number]: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('box-number-a')) ||
      (v=='hoge2' && i.classList.contains('box-japanese')) ||
      (v=='hoge3' && (i.classList.contains('box-number-a') || i.classList.contains('box-japanese-number') || i.classList.contains('box-nonjapanese-number')))
       ){
        i.classList.remove('hide'); 
      }
    });
}
</script>

<script type="text/javascript">
window.onload = function(){
  entryChange();
  Array.prototype.map.call(document.querySelectorAll("[name=entryPlan-alphabet]"),function(i){
    i.addEventListener('change',function(){entryChange()});
  });
}
function entryChange(){
  var ele=document.querySelectorAll("[name=entryPlan-alphabet]: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=='hoge4' && i.classList.contains('box-alphabet-a')) ||
      (v=='hoge5' && i.classList.contains('box-japanese-alphabet')) ||
      (v=='hoge6' && (i.classList.contains('box-alphabet-1') || i.classList.contains('box-japanese-alphabet') || i.classList.contains('box-nonjapanese-alphabet')))
       ){
        i.classList.remove('hide'); 
      }
    });
}
</script>

jsが悪いのかHTMLが悪いのか、もうわかりません！泣
どなたかお助けください。よろしくお願い致します。<(_ _)>

Answer 1

別質問でたてたのですね。前回の質問に追記しときました

Answer 2

1. tableとinputの入ったdivを同じdivで囲う
2. querySelectorAllの起点をその要素にする

で区別できるのでは。

Comments

[退会済みユーザー]

sono1とsono2でくくる。というのはわかったのですが、たぶん次が理解できてないかもしれません。
このようになってしまいました…??
https://jsfiddle.net/ow1c2z5x/
「起点を要素にする」というのは、このような意味ではないのでしょうか？

[kei344]

たとえば、document.querySelector(".sono2").querySelectorAll('.green') でテーブルが取得できます。document.querySelectorは全体から探索するのに対し、element.querySelectorはそのノード以下について探索します。
というかjQueryでも使いましょう。そのほうが簡単ですよ。

[退会済みユーザー]

たびたびすみません。むむ~。たとえばsono1とpinkだけそのように書いてみたのですが、ラジオ選択しても反応してくれないご様子です。。
https://jsfiddle.net/qa8upomv/
もちろんsono2とgreenも同様に反応ナシです。
https://jsfiddle.net/qa8upomv/1/
書く場所は３か所であっていますよね？？

[kei344]

使い方が違います。console.logでdocument.querySelector(".sono1").elementが有るかどうか確認してみてください。
例示方法が悪かったですね、elementはDOMのElementのつもりで書いたのです。

【Element - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element

<div id="sono" class="sono1"><div class="pink"></div></div>
var eleId = document.getElementById('sono'); // sonoというIDの要素を取得
var eleClass = document.querySelector(".sono1"); // sono1というクラスの要素を取得
eleId.querySelector(".pink"); // ↓同じ要素を指している
eleClass .querySelector(".pink"); // ↑同じ要素を指している

良い例が思いつきません。

[退会済みユーザー]

むずかしくてギブアップの巻でした。笑
いつもありがとうございます。

[kei344]

https://teratail.com/questions/84991
こちらで解決しているようですので、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

[退会済みユーザー]

ご指摘ありがとうです。そちらのご回答は私のwordpressテーマでは適用できませんでした。なので、もうちょっとこちらの質問を放置しておいて、私のテーマでも適用できそうなご回答がポンと出て来たらいいな。なんてたくらんでいます。「解決」の意味するところがビミョーなところですね(*_*;

[退会済みユーザー]

そちらのご回答では「テーブルを<form>でくくる」という方法でした。そしてこちらでkei344さんから頂戴したご回答は別の方法（難しそうで断念）。なので、なんかもっと他の方法が出て来ないかな。と。笑

[kei344]

> 質問を放置しておいて･･･
それは失礼しました。WordPressで動かないなら多くの場合、エラーが発生していると思われます。それを解決するほうが早いかもしれませんよ。

ギブアップされたようなので補足もコメントもしませんが、jQueryを使うほうが確実に簡単です。

[退会済みユーザー]

いいえ、いつもご指摘感謝していますよ♪

エラー解決は
ステップの基本がわからず、とりあずwordpressの当該テーマのｊｓフォルダを削除してみたり、あとはｊｓ整形サイトでちょっと変えて書き直してみたりしたのですが、ダメでした。

jqueryは
過去に何度もwordpressに実装しようとして、完全にあきらめちゃってるのです(笑)。 jsなら投稿画面とheaderに書くだけで楽ちんなのです。

しばらくしたらもう少し質問をシンプルにしてもう一度投稿してみようと思います。それではよい週末を。

[退会済みユーザー]

いまwordpressサポートの会社さん宛てにメール打ってるのですが、kei344さん、ビットコイン３０００円分お送りするので解決してくださいませんか？ｗお立場もあるでしょうけれど…笑

[退会済みユーザー]

もちろん前金でございます。（３０００円でえらそーにｗ）