Флажки: отметив меня!

Question

это маленький, но очень раздражающий , глюк в моей форме.

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

Однако (график утолщается), если в форме установлен другой флажок, можно установить флажок триггера и отобразить дополнительные параметры, , но если этот флажок не установлен, дополнительный параметр не исчезнет! * (Извините, что долго думал, но я хотел быть ясным!)

Вот мой простой код Jquery:

$(function() {

    var boxes = $('.obstruct-opt');
    boxes.hide();

    var ob = $('li.obstructionOptions').children().eq(0);

    ob.change(function() {
    if ($('$(this):checked').val()) {
        boxes.show();
    }
    else {
        boxes.hide();
    }
    });

});

Я пробовал разные способы проверки, если триггер проверен или нет, но любые предложения приветствуются.

Редактировать HTML в соответствии с запросом: (хотя он и был упрощен, поскольку мой элемент управления репитера ASP.Net его сгенерировал)

<ul>
<li class="obstructionOptions">                   

<span>
<input id="Obstruction" type="checkbox" name="Obstruction" />
<label for="Obstruction">Obstruction</label>
</span>

<span class="obstruct-opt">
<input id="WeatherProof" type="checkbox" name="WeatherProof"/>
<label for="WeatherProof">WeatherProof</label>
</span>

<span class="obstruct-opt">
<input id="WeatherProofFlap" type="checkbox" name="WeatherProofFlap"/>
</span>

</li>

<li class="obstruct-opt">
<span>Obstruction Notes</span>
<textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"/>           
</li>
</ul>

Надеюсь, это поможет!

Обновление: замена условия if на

if ($(this).is(":checked")) {

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

Обновление Хорошо, после публикации моего HTML я понял, что ASP.Net меня зашивает! Как вы можете видеть, я выбираю объект ob в качестве первого дочернего элемента, но первый дочерний элемент является сгенерированным диапазоном! Все это время ASP оборачивал мои флажки в пролетах, и я никогда не подозревал! проницательный!

Я использовал этот код в конце:

  $('ul li.obstructionOptions span').children().eq(0).click(function() {
        if ($(this).is(":checked")) {
                boxes.show();
            }
            else {
                boxes.hide();
            }
    });

Спасибо adamantium, так как это решило продукт!

Проблема решена!

Не доверяйте ASP.Net моей разметке !!!

Answer 1

Как насчет замены

if ($('$(this):checked').val())

с

if ($(this).is(':checked'))

есть

Проверяет текущий выбор против выражение и возвращает истину, если в хотя бы один элемент выделения соответствует данному выражению.

Edit: Заменить

var ob = $('li.obstructionOptions').children().eq(0);

с

var ob = $('ul li.obstructionOptions span').children().eq(0);

и

<textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"/>

с

<textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"></textarea>

и ваш код работает нормально.

Рабочая демонстрация

Answer 2

Возможно, это как-то связано с этой строкой:

if ($('$(this):checked').val()) {

AFAIK, это ничего не даст. Вы, вероятно, хотите это:

if ($(this).is(":checked")) {

Answer 3

ob.change(

Флажок onchange не срабатывает в IE, пока не сфокусирован. По этой причине обычно вместо этого используют onclick.

$('$(this):checked').val()

Не работает по двум причинам. Во-первых, вы включили $(this) как часть строки. Доллар и скобки ничего не значат для селекторов, поэтому jQuery не будет ничего соответствовать. У вас уже есть объект this, который вы хотите; Вам не нужно больше ничего выбирать. Во-вторых, val() для флажка получает значение этого флажка, независимо от того, установлен он или нет. Это атрибут value, или on, если вы его не указали.

Хотя вы можете проверить наличие проверок с помощью if ($(this).is(':checked')), гораздо удобнее читать и гораздо быстрее использовать стандартное свойство DOM checked. У вас нет , чтобы записывать все, что вы делаете в jQuery.

ob.click(function() {
    if (this.checked)
        boxes.show();
    else
        boxes.hide();
});