我有复选框列表,如果选择了子项,则自动选择了父项,然后所有选择都显示在 textarea 中。
问题:
当只选择一个孩子时,父母不显示在文本区域中。选择何时选择更多1个孩子。即使只选择了一个孩子,我也需要在 textarea 上显示父级
代码:http: //jsfiddle.net/NVhnw/
html:
<ul class="taglist">
<li class="category">Category:
<ul>
<li class="category"><input type="checkbox" name="A" value="Parent">Parent
<ul>
<li><input type="checkbox" class="liChild" name="A" value="Child1">Child1</li>
<li><input type="checkbox" class="liChild" name="A" value="Child2">Child2</li>
</ul>
</li>
</ul>
</ul>
<br/>
You checked:
<br/>
<textarea rows="4" cols="50" class="textfield" name="describe" class="required" id="describe">
</textarea>
查询:
//* Parent select if children selected*//
$(document).ready(function() {
$('input.liChild').change(function() {
$(this).closest('ul')
.siblings('input:checkbox')
.prop('checked', $(this).closest('ul')
.children()
.children('input:checkbox')
.is(':checked'))
.first().change();
});
$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$('li.category').each(
function(column) {
$(this).click(function(event){
if (this == event.target) {
if($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else
{
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
});
//*Text area update*//
function updateTextArea() {
var allVals = [];
$('.taglist :checked').each(function(i) {
allVals.push((i!=0?"\r\n":"")+ $(this).val());
});
$('#describe').val(allVals).attr('rows',allVals.length) ;
}
$(function() {
$('.taglist input').click(updateTextArea);
updateTextArea();
});