2013-02-13 5 views
11

Во-первых, просто хотел сказать, что я безнадежен с jQuery.jQuery, выбрав все дочерние флажки

Я смотрел на некоторый код из поста на здесь, который выбирает каждый родительский флажок (и работы):

$(function() { 
    $(":checkbox").change(function() { 
    $(this).parents().children(':checkbox').attr('checked', this.checked); 
    }); 
}); 

У нас есть структура в виде дерева с помощью <ul> <li> и каждый <li> имеет флажок. Я хочу сделать противоположное вышеизложенному и выполнить тот же выбор флажка на всех дочерних флажках.

Может ли кто-нибудь изменить вышеуказанное, чтобы сделать это?

Просто отметить, что мы используем бритву и каждый флажок является @ Html.CheckboxFor поэтому выход вдоль линий:

<input name="Survey.Buildings[0].IsSelected" type="checkbox" value="true" checked="checked" data-val="true" data-val-required="The Selected? field is required." id="Survey_Buildings_0__IsSelected" /> 
<input name="Survey.Buildings[0].IsSelected" type="hidden" value="false" /> 
  • EDIT 2:

ОК У меня есть исправлено HTML, и теперь структура выглядит так:

<ul> 
    <li> Cbx1 
     <ul> 
      <li> Cbx 2 </li> 
     </ul> 
    </li> 
    <li> Cbx3 </li> 
    <li> Cbx4 
     <ul> 
      <li> Cbx 5 </li> 
      <li> Cbx 6 </li> 
     </ul> 
    </li> 
</ul> 

Итак, если Cbx4 был проверен Cbx5 a й 6 будет проверены, и если бы он был необузданными они будут бесконтрольно

Высокой оценка

Энди

+0

Вы должны будете предоставить некоторые конкретные HTML фрагмент кода, и описать, какие именно коробки должны быть проверены, когда определенные изменения коробки. – nbrooks

+0

Обновлено мое сообщение –

+0

, если Cbx2 проверено, ничего не произойдет, я хочу переключить дочерние флажки. Таким образом, cbx1 будет переключать cbx2 не наоборот, а cbx4 будет переключать cbx5 и 6. –

ответ

27

jsFiddle Demo

$(function() { 
    $("input[type='checkbox']").change(function() { 
    $(this).siblings('ul') 
      .find("input[type='checkbox']") 
      .prop('checked', this.checked); 
    }); 
}); 
+0

Проблема в том, что на вашем примере jsfiddle, когда выбрано 3, выбрано 4, и оно не является дочерним по 3. Так что в примере на моем сообщении, когда Cbx3 выбрано ничто другое не будет затронуто, поскольку у него нет дочернего LI –

+0

Я вижу, что да, 5 и 6 должны существовать в том же LI, что и может быть моей проблемой, я буду исправлять свой HTML, и будет ли ваш пример работать? –

+0

Я обновил сообщение, чтобы отразить, как выглядит HTML. Как вы можете видеть, CBx5 и CBX6 теперь являются дочерним списком в списке CBX4. Имеет ли это смысл? –

0
$(function() { 
    $(":checkbox").change(function() { 
    $(this).children(':checkbox').attr('checked', this.checked); 
    }); 
}); 

Не совсем понятно, с вопросом, но вы можете попробовать еще раз, удалив родитель() как показано выше.

Смежные вопросы