我有一个表单,其中复选框分为多个组,单选按钮组以选择全部并选择无。复选框标签将附加一个类(对于css,使其成为图像)。我遇到的问题是脚本在条件语句中循环回自身,我一直在努力解决问题。
我创建了一个JSFiddle页面,其中的代码为http://jsfiddle.net/jaread83/V5SSM/
我想要它做什么:
单击SelectAll,所有复选框标签都会获得'c_on'类,并且所有复选框都会被选中。
单击SelectNone,所有复选框标签都删除了'c_on'类,并取消选中所有复选框输入。
当click_label被点击时,该部分中的所有复选框标签都会被'c_on'并且也会被选中,然后在取消选中时,删除已选中状态并仅从该部分删除'c_on'类。
当单击一个不是section_label的复选框标签时,该单个项目标签会添加“c_on”类,并且复选框会获得检查状态。
html:
<div class="form">
<div class="document">
<div class="section inline">
<label class="label_radio lightblue" id="selectAllButton" for="selectAll">
<input type="radio" name="masscheck" id="selectAll" />Select all</label>
</div>
<div class="section inline">
<label class="label_radio lightblue" id="selectNoneButton" for="selectNone">
<input type="radio" name="masscheck" id="selectNone" />Select none</label>
</div>
<div class="clear"></div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1131">
<input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label>
</div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1118">
<input type="checkbox" id="docs_1118" name="docs" value="1118" />
Section 1
</label>
<blockquote>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1119">
<input type="checkbox" id="docs_1119" name="docs" value="1119" />
Subsection 1.1
</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1120">
<input type="checkbox" id="docs_1120" name="docs" value="1120" />
Subsection 1.2
</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1121">
<input type="checkbox" id="docs_1121" name="docs" value="1121" />
Subsection 1.3
</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1122">
<input type="checkbox" id="docs_1122" name="docs" value="1122" />
Subsection 1.4
</label>
</div>
</blockquote>
</div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1123">
<input type="checkbox" id="docs_1123" name="docs" value="1123" />
Section 2
</label>
<blockquote>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1124">
<input type="checkbox" id="docs_1124" name="docs" value="1124" />
Subsection 2.1
</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1125">
<input type="checkbox" id="docs_1125" name="docs" value="1125" />
Subsection 2.2
</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1126">
<input type="checkbox" id="docs_1126" name="docs" value="1126" />
Subsection 2.3
</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1127">
<input type="checkbox" id="docs_1127" name="docs" value="1127" />
Subsection 2.4
</label>
</div>
</blockquote>
</div>
</div>
<button type="submit" class="icon icon-arrow-white">Submit</button>
JS:
jQuery(document).ready(function($) {
//check all and checknone
$('#selectAll').click(function() {
var selectAllButton = $('#selectAllButton');
var selectNoneButton = $('#selectNoneButton');
var checkboxes = $(this).closest('form').find(':checkbox');
var checklabels = $('.label_check');
checkboxes.attr('checked', true);
checklabels.addClass('c_on');
selectAllButton.addClass('c_on');
selectNoneButton.removeClass('c_on');
});
$('#selectNone').click(function() {
var selectAllButton = $('#selectAllButton');
var selectNoneButton = $('#selectNoneButton');
var checkboxes = $(this).closest('form').find(':checkbox');
var checklabels = $('.label_check');
checkboxes.attr('checked', false);
checklabels.removeClass('c_on');
selectNoneButton.addClass('c_on');
selectAllButton.removeClass('c_on');
});
//check all within section
$('.section .section_label').click(function(){
var p = $(this).parent();
if($(this).hasClass('c_on')){
// remove the checkbox classes on sub sections
p.find('.subsection').find('label').removeClass('c_on');
// remove the class from the thing we have clicked
$(this).removeClass('c_on');
} else {
p.find('.subsection').find('label').addClass('c_on');
$(this).addClass('c_on');
}
});
});
对此的任何帮助将不胜感激。
答案 0 :(得分:1)
这样的东西?
$('#selectAllButton').on('click', function () {
$('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on');
});
$('#selectNoneButton').on('click', function () {
$('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on');
});
$('.section .section_label input').click(function () {
var chckClass = "";
if (!this.checked) {
chckClass = "";
} else {
chckClass = "c_on"
}
$(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass);
});
$('input[type="checkbox"]').on('click', function () {
var chckClass = "";
if (!this.checked) {
chckClass = "";
} else {
chckClass = "c_on"
}
$(this).closest('label').removeClass('c_on').addClass(chckClass);
});
答案 1 :(得分:0)
使用prop()
代替attr()
查看复选框,查看演示here
<强>更新强>
jQuery(document).ready(function($) {
//check all and checknone
$('#selectAll').click(function() {
var selectAllButton = $('#selectAllButton');
var selectNoneButton = $('#selectNoneButton');
var checkboxes = $('input:checkbox');
var checklabels = $('.label_check');
checkboxes.prop('checked', true);
checklabels.addClass('c_on');
selectAllButton.addClass('c_on');
selectNoneButton.removeClass('c_on');
});
$('#selectNone').click(function() {
var selectAllButton = $('#selectAllButton');
var selectNoneButton = $('#selectNoneButton');
var checkboxes = $('input:checkbox');
var checklabels = $('.label_check');
checkboxes.prop('checked', false);
checklabels.removeClass('c_on');
selectNoneButton.addClass('c_on');
selectAllButton.removeClass('c_on');
});
//check all within section
$('.section .section_label input:checkbox').click(function(){
var p = $(this).parents('.section');
p.find('div.subsection input:checkbox').prop('checked', this.checked);
if(!this.checked){
$(this).parent().removeClass('c_on')
// remove the checkbox classes on sub sections
p.find('.subsection').find('label').removeClass('c_on');
// remove the class from the thing we have clicked
$(this).removeClass('c_on');
} else {
$(this).parent().addClass('c_on')
p.find('.subsection').find(':checkbox').prop('checked', true)
p.find('.subsection').find('label').addClass('c_on');
$(this).addClass('c_on');
}
});
});
如果您对此有任何疑问或疑虑,请与我们联系。
很高兴为您提供帮助