2013-06-19 2 views
0

У меня есть группа флажков (вытащил из базы данных).Отметить родительский, если выбраны все дети JQuery

Это то, что мне нужно:

  • Если все дети выбирают в пределах DIV = тик родителя
  • Если один ребенок не отобранной в ДИВ = ун-тик родителя

Я искал в Интернете, но не было большой удачи.

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

if ($('.group').parent().siblings('.child-group').find("input").not(':checked').size() == 0) 
{ 
    $('#').closest('input'); 
    alert("instead"); 

} 

        <div id="OneParent"> 
        <img id="OneImage" class="box-toggle" data-paired-element="One" src="../../Content/Images/minus.jpg" width="15px" height="15px" /> 
        <label><input type="checkbox" id="One" class="group" />One</label>       

        <div class="One child-group"> 
         <ul> 
           <li> 
            <label> 
              <input type="checkbox" id="circulationList" class="One child" name="SelectedUsers" value="User1" checked="checked" /> 
             User1 
            </label> 
           </li> 
           <li> 
            <label> 
              <input type="checkbox" id="circulationList" class="One child" name="SelectedUsers" value="User2" checked="checked" /> 
             User2 
            </label> 
           </li> 
         </ul> 
        </div> 
       </div> 
       <div id="TwoParent"> 
        <img id="TwoImage" class="box-toggle" data-paired-element="Two" src="../../Content/Images/minus.jpg" width="15px" height="15px" /> 
        <label><input type="checkbox" id="Two" class="group" />Two</label>       

        <div class="Two child-group"> 
         <ul> 
           <li> 
            <label> 
              <input type="checkbox" id="circulationList" class="Two child" name="SelectedUsers" value="User3" checked="checked" /> 
             User3 
            </label> 
           </li> 
         </ul> 
        </div> 
       </div> 

Заранее благодарим за любую помощь.

Clare :-)

+1

Вы не должны использовать идентификаторы для более чем одного элемента, просто добавьте 'circulationList' как класс вместо этого. – Joe

+0

Хорошо, спасибо, что сообщили мне. Я изменю это в своем коде – ClareBear

ответ

5

Вы могли бы использовать это:

$('.child').on('change', function() { 
    var parent = $(this).closest('.child-group'), 
     status = parent.find('input.child').not(':checked').length === 0; 
    parent.prev("label").find('.group').prop('checked', status); 
}).trigger('change'); 

Здесь он работает: http://jsfiddle.net/RP9FC/5/

0
$(document).on('change', 'input.child', function (e) { 
    var $target = $(e.target), 
     $group = $target.parents().find('input.group'); 
    $group.prop("checked", $target.parents().find('input.child:checked').length > 0); 
}) 

http://jsfiddle.net/ma9ic/a8eJT/

0

Я хотел бы предложить:

$('input[type="checkbox"].child').change(function(){ 
    var $a = $(this).closest('ul'), 
     $c = $a.find('input[type="checkbox"]'), 
     checked = $c.filter(function(){ 
      return this.checked; 
     }); 
    $a.closest('div[id]').find('> label > input[type="checkbox"]').prop('checked', $c.length === checked.length); 
}); 

JS Fiddle demo.

Ссылки:

0

Попробуйте

$('#select_all').click(function() { 
var c = this.checked; 
$(':checkbox').prop('checked',c); 
}); 

Или

$('#select_all').change(function() { 
var checkboxes = $(this).closest('form').find(':checkbox'); 
if($(this).is(':checked')) { 
    checkboxes.attr('checked', 'checked'); 
} else { 
    checkboxes.removeAttr('checked'); 
} 
}); 
Смежные вопросы