2013-07-15 3 views
3

Надеясь, что кто-то может помочь с этим.jQuery checkbox (отметьте/снимите отметку, если другие проверены)

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

Все флажки на странице имеют одинаковое атрибут «имя», но у них есть подгруппы.

Я хочу расширить это, поэтому, когда какой-либо флажок «проверен» внутри группы, проверяется «родительский», и если ни одна из сгруппированных (в пределах <ul></ul>), то родитель не установлен.

я установки jsFiddle здесь: http://jsfiddle.net/swdmedia/xsDgm/13/

JQuery

$('input.checkbox').click(function() { 
    var parent = $(this).attr('data-parent'); 

    $('#'+parent).attr('checked', true); 
}); 

HTML

<h4>Agriculture <input type="checkbox" id="cat4" name="cntnt01cd_categories[]" value="4" /></h4> 

<ul> 
    <li> 
    <label for="cat44" class="checkbox"> 
    <input type="checkbox" class="checkbox" id="cat44" name="cntnt01cd_categories[]" value="44" data-parent="cat4" />Farm Services</label> 
</li> 
    <li> 
    <label for="cat40" class="checkbox"> 
    <input type="checkbox" class="checkbox" id="cat40" name="cntnt01cd_categories[]" value="40" data-parent="cat4" />Farming</label> 
</li> 
</ul> 

<h4>Automotive Sales and Supplies <input type="checkbox" id="cat5" name="cntnt01cd_categories[]" value="5" /></h4> 

<ul> 

    <li><label for="cat46" class="checkbox"><input type="checkbox" id="cat46" name="cntnt01cd_categories[]" value="46"/> Auto Service or Auto Repair</label></li> 

    <li><label for="cat48" class="checkbox"><input type="checkbox" id="cat48" name="cntnt01cd_categories[]" value="48"/> Auto Glass</label></li>           
</ul> 

ответ

2

использование prop() вместо attr() и data() получить attribite данных HTML5

$('input.checkbox').click(function() { 
    var parent = $(this).data('parent'); 

    $('#'+parent).prop('checked', true); 
}); 

обновлен (я думаю, вы будете нуждаться в этом тоже)

обновленный вариант: если какой-либо из флажком внутри группы проверяют родителей проверяется еще бесконтрольно.

$('input.checkbox').click(function() { 
    var parent = $(this).data('parent'); 
    var checked =false; 
    $(this).parents('ul').find(':checkbox').each(function(){ 
    if(this.checked){ 
     checked = true; 
     return; 
    } 
    }); 
$('#'+parent).prop('checked', checked); 
}); 

я понял вашу вторую группу в скрипку не работает, так как вы не заявили класс ввода и атрибутов данных для этой группы. и да, вы можете выбрать все входные флажки с $(':checkbox') вместо того, чтобы давать класс ко всему элементу флажка ввода и селектору класса вызовов (меньше кода).

fiddle

+0

фантастический, спасибо, bipen! – geepers

+0

приветствуется ... счастливое кодирование .. :) – bipen