[英]How to catch the event when none of checkboxes from group is checked or at least one checkbox is checked and then add a class for the related div?
<div class="accordion-group">
<div class="accordion-heading">
<a href="#collapse" data-parent="#accordionQuiz" data-toggle="collapse1.." class="accordion-toggle">
<strong>1...</strong>
Question
</a>
</div>
<div class="accordion-body collapse" id="collapse1..">
<div class="accordion-inner">
<div class="control-group">
<label for="1..@1.." class="control-label">A..</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" value="FirstAnswer" name="1..@1.." id="1..@1..">
content
</label>
</div><!-- /.controls -->
</div><!-- /.control-group -->
<div class="control-group">
<label for="2..@2.." class="control-label">B..</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" value="SecondAnswer" name="2..@2.." id="2..@2..">
content
</label>
</div><!-- /.controls -->
</div><!-- /.control-group -->
</div><!-- /.accordion-inner -->
</div><!-- /.accordion-body collapse .. -->
</div><!-- /.accordion-group -->
Above code is a piece of Quiz form and is repeating for every question. 上面的代码是一个测验形式,并且每个问题都在重复。 It looks like: Example
它看起来像: 示例
How to catch the event when none of question-related-checkboxes is checked or at least one is checked and then add a class for the div.accordion-heading ? 如果未选中任何与问题相关的复选框,或者至少选中了一个复选框,然后为div.accordion-heading添加一个类,如何捕获事件?
Something like: none is checked - empty , at least one - not-empty . 像这样的东西:none不被检查为空 ,至少一个为非空 。
There'll be diferent colours and it'll be very useful feature for user to come back to the question which he skiped becouse only one is visible at a time. 将会有不同的颜色,这对于用户回到他跳过的问题将是非常有用的功能,因为一次只能看到一个。
I tried do this by myself but I've just started to learn jQuery and... I give up. 我尝试自己完成此操作,但我刚刚开始学习jQuery,并且...我放弃了。 Perhaps this is a job for mighty AJAX?
也许这是强大的AJAX的工作?
Didn't error check this at all, but here's how I'd do it! 完全没有错误检查,但是这就是我的方法! I'm sure you can optimize it for your actual application
我确定您可以针对实际应用对其进行优化
function validateGroup( groupID )
{
var valid = 0;
var $group = $('#' + groupID)
$group.find(':checkbox').each( function() {
if ($(this).is(':checked')
{
valid = 1;
}
});
if (!valid)
{
$group.addClass("NotValid");
}
}
It is pretty simple to accomplish this with the following steps: 通过以下步骤来完成此操作非常简单:
click
on all checkbox. click
所有复选框。 click
count how many checkbox were checked in group. click
计数中,组中选中了多少个复选框。 The JavaScript
code looks like this, which can be optimized . JavaScript
代码如下所示,可以对其进行优化 。
$('.accordion-group :checkbox').click(function() {
var $this = $(this);
var $group = $this.parents('.accordion-group:first');
var $checkboxes = $group.find(':checkbox');
var checks = 0;
$checkboxes.each(function() {
if ($(this).is(':checked')) {
checks++;
}
});
console.log(checks);
var $heading = $group.find('.accordion-heading');
if (checks === 0)
$heading.removeClass('not-empty').addClass('empty');
else
$heading.removeClass('empty').addClass('not-empty');
});
I made a demo at jsfiddle: http://jsfiddle.net/W2XD2/ 我在jsfiddle上做了一个演示: http : //jsfiddle.net/W2XD2/
EDITS 编辑
I optimized the script to be more specific, and optimize it: 我对脚本进行了优化,使其更加具体,并对其进行了优化:
$('.accordion-group :checkbox').click(function() {
var $group = $(this).parents('.accordion-group:first');
var checks = $group.find(':checked').length;
var $heading = $group.find('.accordion-heading');
if (checks === 0)
$heading.removeClass('not-empty').addClass('empty');
else
$heading.removeClass('empty').addClass('not-empty');
});
You can check the updated revision at jsfiddle: http://jsfiddle.net/W2XD2/1/ 您可以在jsfiddle中查看更新的修订版: http : //jsfiddle.net/W2XD2/1/
I am not sure how you want to trigger the event. 我不确定您要如何触发该事件。
If you want to do the checking on save or on clicking the next accordion heading you might want to do this: 如果要检查保存或单击下一个手风琴标题,则可能要这样做:
$(".b_save").click(function() {
//change the above to $(".accordion-heading") if that is what you trigger the event with
$.each($(".accordion-group"), function() {
cls = $(this).find(":checked").length? "#00b5f8":"#ff0000";
$(this).find(".accordion-heading").css("background-color", cls);
})
})
If you want to change the color when you click on the checkbox this is the code: 如果要在单击复选框时更改颜色,则代码如下:
$(function(){
$("input:checkbox").click(function(){
parentEl = $(this).closest(".accordion-group");
cls = $(parentEl).find(":checked").length?"#00b5f8":"#ff0000";
$(parentEl).find(".accordion-heading").css("background-color", cls);
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.