показать / скрыть объект на основе выбора флажка

Question

У меня есть страница, которая включает в себя набор флажков, каждый со значением, которое генерируется динамически, поэтому оно меняется с каждым отображением страницы.Пример выглядит следующим образом:

<fieldset id="P163_PROFILES" tabindex="-1" class="checkbox_group">
   <input type="checkbox" id="P163_PROFILES_0" name="p_v01" value="264" checked="checked">
   <input type="checkbox" id="P163_PROFILES_1" name="p_v01" value="2356" checked="checked">
</fieldset>

Затем у меня есть теги <div class="264"> и <div class="2356"> на остальной части страницы в макете календаря, где класс DIV совпадает с входными значениями.У меня вопрос такой.Если пользователь отменяет / проверяет одно из полей ввода, я хочу скрыть / показать DIV с соответствующими классами.Поскольку я новичок в jQuery, я борюсь с логикой, чтобы идентифицировать входной объект, который изменился, а затем использовать его значение для изменения соответствующих объектов DIV.Вот код, который у меня есть на данный момент:

<script type="text/javascript"> 
$( '[id^=P163_PROFILES_]' ).click(function(){
   var pClass = '.'+$(this).val();
   if ($(this).is(':checked')) {
         $(pClass).show;
      } else {
         $(pClass).hide;
      }
});
</script>

Я даже близко?

Спасибо, Джефф

Answer 1

Ты на самом деле очень близко! Вы забываете () после show() и hide() методов:

if ($(this).is(':checked')) {
    $(pClass).show();
} else {
    $(pClass).hide();
}

Вот демоверсия

Answer 2

На самом деле вы можете еще больше упростить его, если будете запрашивать входные наборы полей вместо того, чтобы запрашивать идентификаторы, начиная с. Может также упростить ваш код, поскольку это может означать, что вам не нужно генерировать идентификаторы для входных данных.

Кроме того, вы злоупотребляете jQuery. Часто «this» содержит все, что вам нужно, и вам не нужно добавлять накладные расходы, оборачивая его в jQuery. Нет причин не использовать this.checked и this.value напрямую afaik.

$('#P163_PROFILES > input' ).change(function(){
    if (this.checked)
        $('.'+this.value).show();
    else
        $('.'+this.value).hide();
    //Or toggle if you know the initial state is in sync with the target
    //and nothing else changes the show/hide of those targets.
    //$('.'+this.value).toggle();
});

Answer 3

Вы должны быть в состоянии просто этот код. Во-первых, я бы посоветовал не использовать событие click(), предпочтительное событие будет change()

Сначала давайте предположим, что все начинается в желаемом состоянии. Вы можете сделать что-то вроде этого:

<script type="text/javascript"> 
$( 'input[id^="P163_PROFILES_"]' ).change(function(){
   var pClass = '.'+$(this).val();
   $(pClass).toggle();
});
</script>

Toggle просто переключит видимое с выбранного элемента.

Если вам нужно переключаться в зависимости от состояния, сделайте что-то вроде этого:

<script type="text/javascript"> 
$( 'input[id^="P163_PROFILES_"]' ).change(function(){
    var pClass = '.'+$(this).val();
    if ($(this).is(':checked'))
         $(pClass).show();
    else
         $(pClass).hide();
});
</script>

Answer 4

Вы, вероятно, захотите

$('input[id^="P163_PROFILES_"]').click(function(event){
    var pClass = '.'+$(event.target).val();
    if ($(event.target).is(':checked')) {
        $(pClass).show();
    } else {
        $(pClass).hide();
    }
});

Вам, вероятно, не нужно беспокоиться о пузырях с таким конкретным селектором, поэтому вы можете просто использовать:

$('input[id^="P163_PROFILES_"]').click() {
    var $this = $(this);
    $('.'+$this.val()).toggle($this.is(':checked));
});