Блог

Главная - Вопросы по программированию - Как показать / скрыть элементы со значением флажка

Как показать / скрыть элементы со значением флажка

#jquery #jquery-selectors #hide #show

#jquery #jquery-селекторы #скрыть #показать

Вопрос:

Я хочу показать / скрыть элементы, которые имеют определенный класс (один из соответствующих входных данных).

Итак, вот мой код :

 $(document).ready(function(){
$("#fcheck input").click(function(){
    if ($("#fcheck input").is(":checked"))
    {
        //show the hidden div
        var zzz = $(this).val();
        $('li'   zzz).show("fast");
    }
    else
    {
        var yyy = $(this).val();
        $('li'   yyy).hide("fast");
    }
  });

});

И моя «форма»:

 <form id="fcheck">
            <input type="checkbox" name="school" value="school" id="school" /><label for="school">School</label>
        </form>

И, например, что должно переключаться:

 <ul><li class="school">taratata</li></ul>

Дело в том, что мне не удается получить правильный синтаксис для селектора…

И мой код тоже довольно уродливый, я думаю.

С уважением 🙂

Комментарии:

1. Ваш код кажется нормальным — jsfiddle.net/ipr101/93tMa

Ответ №1:

Вы можете использовать селектор классов:

 $(document).ready(function(){
$("#fcheck input").click(function(){
    if ($("#fcheck input").is(":checked"))
    {
        //show the hidden div
        var zzz = $(this).val();
        $('li.'   zzz).show("fast");
    }
    else
    {
        var yyy = $(this).val();
        $('li.'   yyy).hide("fast");
    }
  });

});

Комментарии:

1. Ну, нет. Я хочу настроить таргетинг на «li», который имеет класс значения флажка. Извините за недоразумение, я отредактировал свой пост.

2. @flintsburg: тогда class вместо этого используйте селектор. Смотрите мой обновленный ответ.

3. @flintsburg Просто измените li[value , где указано li[class

4. @brenjt: к сожалению, что-то такое простое не работает для элементов, которые имеют несколько классов (и атрибут JavaScript для class на самом деле className !).

5. @flintsburg: вы должны изменить свой if ($("#fcheck input").is(":checked")) to if ($(this).is(':checked')) , чтобы настроить таргетинг на элемент, который был только что нажат, а не на все входные данные в #fcheck.