jquery .each iterating

Question

Я новичок в обучении jquery, поэтому приношу свои извинения, если это относительно простой вопрос. У меня есть checkboxlist asp.net с идентификатором ChartstoDisplay. Я пытаюсь создать jquery для переключения стиля назад и вперед в зависимости от того, установлен ли флажок отдельного элемента списка. Код, который у меня есть, ниже, стиль «selected» должен быть заменен флажками, которые отмечены полужирным зеленым текстом, но ничего не происходит.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ChartstoDisplay').click(function() { 
      $('input').each(function() { 
       if ($(this).is(':checked')) 
        $(this).toggleClass("selected"); 
      }); 
     }); 

    }); 
</script> 

Я понимаю, что «input'.each итерация по элементам списка CheckBox ищет тегов ввода, затем на следующую строку, используя эту переменную, проверяет наличие или нет проверяется флажок , если это так, то нужно менять стиль.

Answer 1

Там должно быть что-то еще, потому что ваш код, кажется, действительно, только пара лучших практик:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ChartstoDisplay').click(function() { 
      $('input[type="checkbox"]:checked', this).toggleClass("selected"); 
     }); 
    }); 
</script> 

• Не выбирайте все input с, выберите только флажков.
• Установите флажки только под выбранным списком.
• Используйте переключатель :checked, чтобы удалить проверки фильтрации.

DEMO

Answer 2

Он работает. Однако, вероятно, он не делает то, что вы хотите. Прежде всего, можете ли вы показать нам, какой CSS вы привязали к .selected?

Что это такое, он будет переключать все флажки, отмеченные в настоящий момент. Предположим, у вас есть коробки A, B и C.

• Нажмите A. Коробка A отмечена. Box A переключается. Выбран только A.
• Нажмите на B. Боксы A и B отмечены. Оба переключаются. Выбрано только B.
• Нажмите C. Буквы A, B и C отмечены. Все они переключаются. A и C теперь выбраны.
• Нажмите на B, сняв флажок. A и C проверяются, и они переключаются (но не B). Ничего не осталось выбранным.

Если это то, что вы хотите, отлично, но я не могу придумать ни одно приложение, в котором это странное поведение потребуется.

То, что я думаю, что вы хотели это:

$(document).ready(function() { 
    $('#ChartstoDisplay').on("click", "input:checkbox", function() { 
     $(this).toggleClass("selected"); 
    }); 
});​ 

EDIT: Учитывая код OP предусмотрено в скрипку, вот обновленный ответ (fiddle)

$(document).ready(function() { 
    $('#ChartstoDisplay').on("click", "input:checkbox", function() { 
     $(this).next().toggleClass("selected"); 
    }); 
});​ 

Answer 3

$('input').each(...) итерация через все входы на странице, а не только флажки, а не только те, которые принадлежат к «#ChartstoDisplay». Для каждого проверяемого объекта он должен успешно переключать класс - я ничего не вижу в вашем коде, который бы остановил работу, поэтому, возможно, вы могли бы показать свой html?

Вы можете упростить код, хотя, чтобы:

$('input:checked').toggleClass('selected'); 

Это будет переключать класс всех соответствующих элементов - не нужно перебирать их с .each().

Или просто сделать вклад в «#ChartstoDisplay», который находится ближе к тому, что вы действительно хотите сделать:

$('input:checked', this).toggleClass('selected'); 

Где проходит второй параметр функции $() только выбирает элементы в контексте того, что второй параметр - я прохожу this, так как в этот момент this будет «#ChartstoDisplay», если эта строка кода находится внутри обработчика события клика «#ChartstoDisplay».