checkboxでの表示・非表示制御

Question

前提・実現したいこと

複数の会社・商品を取り扱っている部署で、商品注文フォームを作っており、
checkboxとjavascriptを利用して、チェックが入っている会社の商品のみを表示する機能をつけたいと思っています。

インターネットでいろいろ検索して作ってみたのですが、エラーが発生しておりなかなかうまくいきません。

javascriptに詳しい方にご教示いただけますと幸いです。

※例では3社2商品ずつにしておりますが、実際には40社、各5～10商品ずつくらいあるため何としてもこのような絞り込み機能をつけたいと思っています。

どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

ブラウザの開発者ツールでは
Cannot set property 'display' of undefined
と表示されてしまいます。

該当のソースコード

<!-- 会社選択するチェックボックス -->
<ul class="company">
  <li><label><input class="input" type="checkbox" value="companyA" name="company" onclick="dsProduct();" ><span>会社A</span></label></li>
  <li><label><input class="input" type="checkbox" value="companyB" name="company" onclick="dsProduct();" ><span>会社B</span></label></li>
  <li><label><input class="input" type="checkbox" value="companyC" name="company" onclick="dsProduct();" ><span>会社C</span></label></li>
</ul>

<!-- 商品選択するチェックボックス -->
<ul class="products">
  <li class="productA"><label><input class="input" type="checkbox" value="productA1" name="product"><span>A社の商品1</span></label></li>
  <li class="productA"><label><input class="input" type="checkbox" value="productA2" name="product"><span>A社の商品2</span></label></li>
  <li class="productB"><label><input class="input" type="checkbox" value="productB1" name="product"><span>B社の商品1</span></label></li>
  <li class="productB"><label><input class="input" type="checkbox" value="productB2" name="product"><span>B社の商品2</span></label></li>
  <li class="productC"><label><input class="input" type="checkbox" value="productC1" name="product"><span>C社の商品1</span></label></li>
  <li class="productC"><label><input class="input" type="checkbox" value="productC2" name="product"><span>C社の商品2</span></label></li>
</ul>

.products li{display:none;}

function dsProduct(){
	product = document.getElementsByName('company')
	if(product[0].checked) {
			document.getElementsByClassName('productA').style.display = "block";
		} else if(product[1].checked) {
			document.getElementsByClassName('productB').style.display = "block";
		} else if(product[2].checked) {
			document.getElementsByClassName('productC').style.display = "block";
		} 
	}

Answer 1

たとえばこう

HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};
window.addEventListener('DOMContentLoaded', function(e){
  Array.prototype.forEach.call(document.querySelectorAll('.company input[type=checkbox][name=company]'),function(x){
    x.addEventListener('change',function(e){
      dsProduct(e.target.value,e.target.checked);
    });
    x.trigger('change');
  });
});
function dsProduct(v,c){
  Array.prototype.forEach.call(document.querySelectorAll('.'+v.replace("company","product")),function(x){
    x.style.display=c?"":"none";
  });
}

<ul class="company">
  <li><label><input class="input" type="checkbox" value="companyA" name="company" checked><span>会社A</span></label></li>
  <li><label><input class="input" type="checkbox" value="companyB" name="company" checked><span>会社B</span></label></li>
  <li><label><input class="input" type="checkbox" value="companyC" name="company" checked><span>会社C</span></label></li>
</ul>
<ul class="products">
  <li class="productA"><label><input class="input" type="checkbox" value="productA1" name="product"><span>A社の商品1</span></label></li>
  <li class="productA"><label><input class="input" type="checkbox" value="productA2" name="product"><span>A社の商品2</span></label></li>
  <li class="productB"><label><input class="input" type="checkbox" value="productB1" name="product"><span>B社の商品1</span></label></li>
  <li class="productB"><label><input class="input" type="checkbox" value="productB2" name="product"><span>B社の商品2</span></label></li>
  <li class="productC"><label><input class="input" type="checkbox" value="productC1" name="product"><span>C社の商品1</span></label></li>
  <li class="productC"><label><input class="input" type="checkbox" value="productC2" name="product"><span>C社の商品2</span></label></li>
</ul>

value=companyAとclass=productAを紐付けるのはちょっと無理があるかもしれません
できればcompanyなのかproductなのか統一したほうがよいでしょう

Comments

[byxbee]

シンプルな解決法、ありがとうございました。
お陰様で無事やりたいことが実現できました。
もし今後も問題にぶつかってしまった際にはご助言いただけますと幸いです。
宜しくお願い致します。

Answer 2

function dsProduct() {
  document.getElementsByName("company").forEach(function(company) {
    var productClass = company.value.replace("company", "product");
    var products = document.getElementsByClassName(productClass);
    var displayStyle = company.checked ? "block" : "none";
    Array.prototype.forEach.call(products, function(product) {
      product.style.display = displayStyle;
    });
  });
}

Comments

[byxbee]

ご回答いただきありがとうございました。
今回は別の方の回答を採用いたしましたが、root_jp様のご回答も後程勉強させていただきます。

もし今後も問題にぶつかってしまった際にはご助言いただけますと幸いです。
宜しくお願い致します。

Answer 3

よっ
Document.getElementsByClassNameのReturnはArrayとなりますので、

一つのElementしかなかったら、[0]を追加してください。

Document.getElementsByClassName(‘ProductA’)[0].style.display = “block”

Document.getElementsByClassName(‘ProductB’)[0].style.display = “block”

Document.getElementsByClassName(‘ProductC’)[0].style.display = “block”

:)

Comments

[x_x]

JavaScriptは大文字小文字を区別します。getElementsByClassName()の戻りは配列ではなくHTMLCollectionですね。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

JavaScript is case sensitive.
getElementsByClassName() method return HTMLCollection.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

[jerome.dupuis]

そうですね。HTMLCollectionですね。
HTMLCollectionの最初のValueを取得したら、[0]も書けますので、Arrayを言ってしまちゃう。
コメントありがとうございました。

[byxbee]

シンプルな解決法、ありがとうございました。
お陰様で無事やりたいことが実現できました。
もし今後も問題にぶつかってしまった際にはご助言いただけますと幸いです。
宜しくお願い致します。