JQuery для многих флажков, скрывающих / показывающих соответствующие DIV

Question

Моя страница содержит большое количество элементов формы.У меня 114 строк по 12 текстовых полей.В каждой строке текстовых полей есть флажок, который, если установлен, будет скрывать строку текстовых полей.

Я использовал следующий код для переключения строк div.

$(".chk201P").click(function(){
 $("#hide201P").toggle(!this.checked);
 }).triggerHandler('click');

$(".chk201M").click(function(){
 $("#hide201M").toggle(!this.checked);
 }).triggerHandler('click');

ВышеКод для 2 строк.chk201P и chk201M - это флажки, а hide201P и hide201M - это DIV, которые они скрывают, если отмечены.

** РЕДАКТИРОВАТЬ: После просмотра комментариев я немного переделал страницу.Сейчас я использую следующий код, чтобы выделить раздел, который я хочу скрыть.Это основано на коде, который я нашел на сайте API JQuery.

$("form input:checkbox").wrap('<span></span>').parent().parent().siblings('.typentry').css({background:"yellow", border:"1px red solid"});

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

$("form input:checkbox").click(function() {
$(this.parent().parent().siblings('.typentry')).toggle(!this.checked);

}).triggerHandler ('click');

Может кто-нибудь сказать мне, где я ошибаюсь с кодом?

** Конец РЕДАКТИРОВАНИЯ

Учитывая количество строк итекстовые поля, есть ли более простой способ написать JQuery вместо дублирования кода выше 46 раз для соответствующих данных?

Старая страница примера Новая страница примера

Answer 1

Почему бы просто не применить одну и ту же функцию к каждому флажку?Если я правильно понимаю, вы хотите скрыть родительскую строку?

$('input[type=checkbox]').click(function(){
    $(this).parent('tr').toggle($(this).is(':checked'));
});

Этот код не тестировался, но я надеюсь, что он даст вам представление.

Редактировать: добавлено '$ (this) .is (': checked') ', поэтому будет скрываться только строка, если флажок установлен.

Изменено после примера кода: Хорошо, я только что посмотрел ваш код.Пожалуйста, объясните мне одну вещь, потому что я не могу понять это.Вы строите всю таблицу из элементов div и span.Это почему ?Почему бы просто не использовать обычную таблицу?(Я знаю, что для этого есть масса причин, но мне интересно, что у тебя).Но что меня поразило, так это то, что внизу страницы вы используете таблицу, чтобы выровнять 2 тега привязки рядом друг с другом.Почему бы и здесь не использовать div?

Кроме того, я бы посоветовал вам еще раз взглянуть на ваш HTML.Если вы хотите много использовать jQuery, проще поместить затронутые элементы dom одного действия в один div.Я опубликую пример этого ниже.Это потому, что легче найти эти элементы с помощью селекторов.

Example: (wrong way)
<div>
    <input type="checkbox">
</div>
<div>
    <input type="text">
</div>

(right way, atleast for me)
<div>
    <input type="checkbox">
    <input type="text">
</div>

Надеюсь, я вас достаточно проинформировал.Если у вас есть какие-нибудь вопросы.Пожалуйста, не стесняйтесь спрашивать ^^.

Answer 2

Решено ....

$("form input:checkbox").click(function() {
    var dataID = $(this).attr("id");
    $("#hide" + dataID).toggle(!this.checked);
    $("#nor" + dataID).toggle(this.checked);
    //return false;
}).triggerHandler('click');

Объяснить ...

Каждый из 94 флажков генерируется циклом, извлекая информацию из БД. Каждый цикл извлекает этот конкретный идентификатор строки. Флажки имеют имена, соответствующие этим идентификаторам. В моем случае это 201P через 247P и 201M через 247M. Текстовые поля, которые я хочу скрыть, имеют идентификатор «hide + ID» или hide201P и т. Д. Я не показываю ни div, когда скрываю другого, и ему присваивается идентификатор nor201P и т. Д. Когда этот флажок установлен, скрытие DIV скрывается и отображается ни DIV.

Спасибо Бобу за то, что поставили меня на правильный путь.