59225


チェックボックスにチェックを入れたら、リアルタイムでクラスが付与されて`display:none`になったり`diplay:block`になったりするものは多いのですが、いちいち画面がチラつくのでチェックをつけ終えて「検索」を押すとクラスが付与されてほしいです。

下記を参考にしましたが、  
<https://www.mitsue.co.jp/knowledge/blog/frontend/201709/13_1426.html>

`「チェックボックスが操作されたタイミングで要素の属性を変更する」処理`になっているそうです。

これをボタン`<button>`を押したときに要素の属性を変更したいです。

[code]

    var widget = document.getElementById('js-filter');
    var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
    var checkedList = [];
    var filter = function () {
        checkedList = [];
    
        Array.prototype.forEach.call(checkboxes, function (input) {
            if (input.checked) {
                checkedList.push(input.value);
            }
        });
    
        widget.setAttribute('data-filter-view', checkedList.join(' '));
    };
    
    Array.prototype.forEach.call(checkboxes, function (checkbox) {
        checkbox.addEventListener('change', filter);
    });
    
[/code]

[code]

    <style>
    [data-filter-view]:not([data-filter-view=""]) [data-filter-key] {
        display: none;
    }
    [data-filter-view][data-filter-view~="貝類"] [data-filter-key="貝類"],
    [data-filter-view][data-filter-view~="光物"] [data-filter-key="光物"],
    [data-filter-view][data-filter-view~="白身"] [data-filter-key="白身"],
    [data-filter-view][data-filter-view~="赤身"] [data-filter-key="赤身"] {
        display: block;
    }
    </style>
    
    <div class="filter" id="js-filter">
    <ul class="filter-cond">
    <li><label><input type="checkbox" value="貝類">貝類</label></li>
    <li><label><input type="checkbox" value="光物">光物</label></li>
    <li><label><input type="checkbox" value="白身">白身</label></li>
    <li><label><input type="checkbox" value="赤身">赤身</label></li>
    <!-- /.filter-cond --></ul>
    
    <ul class="filter-items">
    <li data-filter-key="貝類">つぶ貝</li>
    <li data-filter-key="白身">カンパチ</li>
    <li data-filter-key="赤身">マグロ</li>
    <li data-filter-key="光物">コハダ</li>
    <li data-filter-key="貝類">バイ貝</li>
    <li data-filter-key="白身">マダイ</li>
    <li data-filter-key="貝類">サザエ</li>
    <!-- /.filter-items --></ul>
    <!-- /#js-filter--></div>
    
[/code]

`<button>`を押すと上記が走るようにしてみたのですが、それだと`<button>`を押したことがあるとチェックボックスでリアルタイムで絞り込みができる、になってしまいました…。

よろしくお願いいたします。


CC BY-SA 4.0
2019-09-23T21:32:41.007
59224
2019-09-23T22:59:38.057
2019-09-23T22:59:38.057
32986
35947
question
javascript html css
Javascriptで検索ボタンありの絞り込みを作りたい


> `「チェックボックスが操作されたタイミングで要素の属性を変更する」処理`になっているそうです。
>
> これをボタンを押したときに要素の属性を変更したいです。

`button` 要素をクリックしたときに `filter` 関数が実行されるようにすれば良いので、イベントを割り当てる要素を `button`
要素に、イベントの種類を `click` に、イベントリスナは `filter`
関数のまま、というように変更することで、質問者さんの期待する動作が実現出来ます。

[code]

    var widget = document.getElementById('js-filter');
    var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
    var filterBtn = document.getElementById('filterBtn');
    var checkedList = [];
    var filter = function() {
      checkedList = [];
    
      Array.prototype.forEach.call(checkboxes, function(input) {
        if (input.checked) {
          checkedList.push(input.value);
        }
      });
    
      widget.setAttribute('data-filter-view', checkedList.join(' '));
    };
    
    filterBtn.addEventListener('click', filter);
    
[/code]

[code]

    var widget = document.getElementById('js-filter');
    var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
    var filterBtn = document.getElementById('filterBtn');
    var checkedList = [];
    var filter = function() {
      checkedList = [];
    
      Array.prototype.forEach.call(checkboxes, function(input) {
        if (input.checked) {
          checkedList.push(input.value);
        }
      });
    
      widget.setAttribute('data-filter-view', checkedList.join(' '));
    };
    
    filterBtn.addEventListener('click', filter);
[/code]

[code]

    [data-filter-view]:not([data-filter-view=""]) [data-filter-key] {
      display: none;
    }
    
    [data-filter-view][data-filter-view~="貝類"] [data-filter-key="貝類"],
    [data-filter-view][data-filter-view~="光物"] [data-filter-key="光物"],
    [data-filter-view][data-filter-view~="白身"] [data-filter-key="白身"],
    [data-filter-view][data-filter-view~="赤身"] [data-filter-key="赤身"] {
      display: block;
    }
[/code]

[code]

    <div class="filter" id="js-filter">
      <ul class="filter-cond">
        <li><label><input type="checkbox" value="貝類">貝類</label></li>
        <li><label><input type="checkbox" value="光物">光物</label></li>
        <li><label><input type="checkbox" value="白身">白身</label></li>
        <li><label><input type="checkbox" value="赤身">赤身</label></li>
        <!-- /.filter-cond -->
      </ul>
      <button id="filterBtn">検索</button>
    
      <ul class="filter-items">
        <li data-filter-key="貝類">つぶ貝</li>
        <li data-filter-key="白身">カンパチ</li>
        <li data-filter-key="赤身">マグロ</li>
        <li data-filter-key="光物">コハダ</li>
        <li data-filter-key="貝類">バイ貝</li>
        <li data-filter-key="白身">マダイ</li>
        <li data-filter-key="貝類">サザエ</li>
        <!-- /.filter-items -->
      </ul>
      <!-- /#js-filter-->
    </div>
[/code]


CC BY-SA 4.0
2019-09-23T22:58:38.297
59225
2019-09-23T22:58:38.297
2020-06-17T08:14:45.997
-1
32986
59224
answer