如何将复选框（：checked）链接到一个类？

Question

我已经设置了一个过滤器列表，其中包含复选框。选中特定复选框时，我需要与类进行交互，以便通过JavaScript隐藏。此外，如果选中了多个复选框，我需要在两个类中显示这些项目。我有这个：

HTML：

   <div class="categs" id="filters">

                <div class="categhead">
                    <p>Ranking</p>
                </div>
                <div class="categsort">
                    <input class="hide-checkbox" type="checkbox" id="tagchallenger" value="challenger" style="display: none;">
                    <label for="tagchallenger">Challenger</label>
                </div>

                <div class="categsort">
                    <input class="hide-checkbox" type="checkbox" id="tagmaster" value="master" style="display: none;">
                    <label for="tagmaster">Master | Diamond</label>
                </div>
                <div class="categsort">
                    <input class="hide-checkbox" type="checkbox" id="tagplat" value="plat" style="display: none;">
                    <label for="tagplat">Platinum | Gold</label>
                </div>

                <div class="categsort">
                    <input class="hide-checkbox" type="checkbox" id="tagsilver" value="silver" style="display: none;">
                    <label for="tagsilver">Silver | Bronze</label>
                </div>

                <script type="text/javascript">
                [].forEach.call(document.querySelectorAll('.hide-checkbox'), function(element) {
                    element.style.display = 'none';
                });
                </script>

            </div>

JavaScript：

     var streameach = $('.streampic .row .col-md-4');

     function updateContentVisibility(){
     var checked = $('#filters :checkbox:checked');
     if(checked.length){
     streameach.hide();
     checked.each(function() {

        $("." + $(this).val()).show();
     });

     } else {
     streameach.show();
     }
     }

     $('#filters :checkbox').click(updateContentVisibility);
     updateContentVisibility();
     }

然后我也有

     <div class="streamtag1">...</div>

和

    var stream0 = "<? echo $lolarray->streams[0]->channel->name; ?>";
    if (stream0 == "riotgames") {

    $('streamtag1').addClass('master');

    };

现在，当单击“master”复选框时，它会隐藏所有 div，但不会显示添加了 master 类的那些，它应该连接到该复选框。

Answer 1

我会像下面这样设置它：

Here's a jsFiddle

     function updateContentVisibility() {
         $('.hide-checkbox').each(function () {
             if ($(this).is(':checked')) {
                 $('.' + $(this).val()).hide();
             } else $('.' + $(this).val()).show();
         });
     }

     $('.hide-checkbox').change(function () {
         updateContentVisibility();
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagriot" value="riot">
<label for="tagriot">RIOT</label>
<input class="hide-checkbox" type="checkbox" id="tagblue" value="blue">
<label for="tagblue">blue</label>
<input class="hide-checkbox" type="checkbox" id="taggreen" value="green">
<label for="taggreen">green</label>
<input class="hide-checkbox" type="checkbox" id="tagred" value="red">
<label for="tagred">red</label>
</div>
<div class="riot">riot</div>
<br>
<div class="blue">blue</div>
<br>
<div class="green">green</div>
<br>
<div class="red">red</div>
<br>

Answer 2

鉴于问题描述，以及 cmets 对该问题的一些澄清，我建议使用以下方法，使用 jQuery：

// selecting the <input> elements of class-name 'hide-checkbox',
// binding an anonymous function to handle the 'change' event:
$('input.hide-checkbox').on('change', function () {

  // selecting all elements whose class-name is equal to the
  // <input> element's value, and using the toggle(switch)
  // approach, to show if the switch is true (the checkbox is checked)
  // and hide if the switch is false (the checkbox is unchecked):
  $('.' + this.value).toggle(this.checked);

// triggering the change event, so that the function runs on page-load,
// to hide/show as appropriate:
}).change();

[].forEach.call(document.querySelectorAll('.hide-checkbox'), function(element) {
  element.style.display = 'none';
});

$('input.hide-checkbox').on('change', function() {
  $('.' + this.value).toggle(this.checked);
}).change();

label {
  cursor: pointer;
}
input:checked + label {
  color: #f90;
}
#contents div[class] {
  border: 1px solid #000;
  border-radius: 1em;
  padding: 0.5em;
  margin: 0 auto 0.5em auto;
  width: 80%;
}
#contents div[class]::before {
  content: attr(class);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categs" id="filters">
  <div class="categhead">
    <p>Ranking</p>
  </div>
  <div class="categsort">
    <input class="hide-checkbox" type="checkbox" id="tagchallenger" value="challenger" style="display: none;" />
    <label for="tagchallenger">Challenger</label>
  </div>
  <div class="categsort">
    <input class="hide-checkbox" type="checkbox" id="tagmaster" value="master" style="display: none;" />
    <label for="tagmaster">Master | Diamond</label>
  </div>
  <div class="categsort">
    <input class="hide-checkbox" type="checkbox" id="tagplat" value="plat" style="display: none;" />
    <label for="tagplat">Platinum | Gold</label>
  </div>
  <div class="categsort">
    <input class="hide-checkbox" type="checkbox" id="tagsilver" value="silver" style="display: none;" />
    <label for="tagsilver">Silver | Bronze</label>
  </div>
</div>

<div id="contents">
  <div class="challenger"></div>
  <div class="master"></div>
  <div class="plat"></div>
  <div class="silver"></div>
</div>

外部JS Fiddle demo，用于实验。

或者，使用纯 JavaScript：

// creating a named function to handle the show/hide functionality:
function toggleView() {

    // a cached reference to the changed <input>:
    var control = this,

    // a reference to whether the <input> is checked or not:
        check = control.checked,

    // retrieving all elements with a class-name equal to the
    // <input> element's value:
        targets = document.querySelectorAll('.' + control.value);

    // using Array.prototype.forEach(), with Function.prototype.call(),
    // to iterate over the found elements:
    Array.prototype.forEach.call(targets, function (node) {

        // setting the display property of each found-element's
        // style property; if the checkbox is checked we set
        // the display to 'block', if not we set it to 'none':
        node.style.display = check ? 'block' : 'none';
    });
}

// creating a 'change' event so that we can trigger the function
// to run on page-load:
var changeEvent = new Event('change');

// As above, iterating over the '.hide-checkbox' elements:
Array.prototype.forEach.call(document.querySelectorAll('.hide-checkbox'), function (element) {

    // hiding the elements:
    element.style.display = 'none';

    // binding the named function (toggleView)
    // to handle the change event:
    element.addEventListener('change', toggleView);

    // triggering the change event on each of the
    // '.hide-checkbox' elements:
    element.dispatchEvent(changeEvent);
});

function toggleView() {
    var control = this,
        check = control.checked,
        targets = document.querySelectorAll('.' + control.value);
    Array.prototype.forEach.call(targets, function (node) {
        node.style.display = check ? 'block' : 'none';
    });
}

var changeEvent = new Event('change');

Array.prototype.forEach.call(document.querySelectorAll('.hide-checkbox'), function (element) {
    element.style.display = 'none';
    element.addEventListener('change', toggleView);
    element.dispatchEvent(changeEvent);
});

label {
  cursor: pointer;
}
input:checked + label {
    color: #f90;
}
#contents div[class] {
    border: 1px solid #000;
    border-radius: 1em;
    padding: 0.5em;
    margin: 0 auto 0.5em auto;
    width: 80%;
}
#contents div[class]::before {
    content: attr(class);
}

<div class="categs" id="filters">
    <div class="categhead">
        <p>Ranking</p>
    </div>
    <div class="categsort">
        <input class="hide-checkbox" type="checkbox" id="tagchallenger" value="challenger" style="display: none;" />
        <label for="tagchallenger">Challenger</label>
    </div>
    <div class="categsort">
        <input class="hide-checkbox" type="checkbox" id="tagmaster" value="master" style="display: none;" />
        <label for="tagmaster">Master | Diamond</label>
    </div>
    <div class="categsort">
        <input class="hide-checkbox" type="checkbox" id="tagplat" value="plat" style="display: none;" />
        <label for="tagplat">Platinum | Gold</label>
    </div>
    <div class="categsort">
        <input class="hide-checkbox" type="checkbox" id="tagsilver" value="silver" style="display: none;" />
        <label for="tagsilver">Silver | Bronze</label>
    </div>
</div>
<div id="contents">
    <div class="challenger"></div>
    <div class="master"></div>
    <div class="plat"></div>
    <div class="silver"></div>
</div>

外部JS Fiddle demmo 用于实验/开发。

参考资料：

• JavaScript：
  • Array.prototype.forEach()。
  • document.querySelectorAll()。
  • Event() constructor。
  • EventTarget.addEventListener()。
  • Event.target.dispatchEvent()。
  • Function.prototype.call()。
• jQuery:
  • change()。
  • on()。
  • toggle()。