Show all messages in an HTML checkbox filter, JavaScript

Question

Show all messages in an HTML checkbox filter, JavaScript

Navigation

#1 by (0 votes)

0

I have the following doubt, I am based on this example to create my own filter with checkboxes, but I do not know in what way I can add the checkbox that shows all my messages and that when another checkbox is pressed, it will be removed the cheked to the checkbox of "All"

This is the HTML on which I am based:

<div class="tags">
    <label>
        <input type="checkbox" rel="todos" />
        Todos
    </label>
    <label>
        <input type="checkbox" rel="arts" />
        Arts
    </label>
    <label>
        <input type="checkbox" rel="computers" />
        Computers
    </label>
    <label>
        <input type="checkbox" rel="health" />
        Health
    </label>
    <label>
        <input type="checkbox" rel="video-games" />
        Video Games
    </label>
</div>
<ul class="results">
    <li class="arts computers">Result 1</li>
    <li class="video-games">Result 2</li>
    <li class="computers health video-games">Result 3</li>
    <li class="arts video-games">Result 4</li>
</ul>

and this is the JQuery

$(document).ready(function () {
        $('.results > li').hide();

        $('div.tags').find('input:checkbox').live('click', function () {
            $('.results > li').hide();
            $('div.tags').find('input:checked').each(function () {
                $('.results > li.' + $(this).attr('rel')).show();
            });
        });
    });

I hope you can help me

javascript jquery html web

asked by Pony94 21.08.2018 в 05:42

source

1 answer

Take the value of a column in sharepoint use img in wordpress main menu

score 0 · Accepted Answer

I assume that with the attribute rel you want to refer to id . In addition to unchecking all by pressing another check , I set that if all is checked, the other checks will be unchecked again

setTimeout(function(){
$('.results > li').hide();
}, 1);

$(".tags input").on("click", function(){
  if($(this).attr("id") == "todos"){
    $("#arts, #computers, #health, #video-games").prop('checked', false);
    filtrar(true);
  }else{
    $("#todos").prop('checked', false);
    filtrar(false);
  }
});

function filtrar(e){
  if(e){
  $(".results li").each(function(){
    $(this).show();
    });
  }else{
    $('.results li').hide();
    $('.tags').find('input:checked').each(function () {
       $('.results li.' + $(this).attr('id')).show();
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tags">
    <label>
        <input type="checkbox" id="todos" />
        Todos
    </label>
    <label>
        <input type="checkbox" id="arts" />
        Arts
    </label>
    <label>
        <input type="checkbox" id="computers" />
        Computers
    </label>
    <label>
        <input type="checkbox" id="health" />
        Health
    </label>
    <label>
        <input type="checkbox" id="video-games" />
        Video Games
    </label>
</div>
<ul class="results">
    <li class="arts">Result Arts</li>
    <li class="computers">Result Computers</li>
    <li class="health">Result Health</li>
    <li class="video-games">Result Video-games</li>
</ul>