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

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> 

Надеется, что это помогает!

Update: подставляя если условие

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

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

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

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

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

Спасибо адамантия как это решается тычок отлично!

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

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

Answer 1

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

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

с

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

is

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

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> 

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

Working Demo

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(); 
});