关于javascript：jQuery评估是否选中了复选框并包含类true

jQuery evaluate if checkbox is checked and contains the class true

本问题已经有最佳答案，请猛点这里访问。

我正在使用jquery创建多选项评估。目前dom结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<button class="multiplesubmit">Check Answer</button>
<ul class="multiplechoice_answergroup">
<li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1
</li>

<li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1
</li>

<li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1
</li>

<li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox"> Answer 1
</li>

</ul>

我需要编写一个函数，当点击按钮时，看看复选框是否被勾选，LI的类名是否包含"true"。

到目前为止，这是我的jquery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$('.multiplechoice_answer .Paragraph').prepend('<input class="checkbox" type="checkbox" name="checkme" />');
$('.multiplechoice_wrap').prepend('<button class="submit_button multiplesubmit">Check Answer</button>');

$('.multiplesubmit').click(function() {
multipleChoiceCheck();

});

var multipleChoiceCheck = function() {
if($('input:checkbox[name=checkme]').is(':checked') && $('.multiplechoice_answer').hasClass('True')) {
alert('correct!');
}

};

相关讨论

1
2
3
4
5
6
7
8

jsfiddleP＞＜／

更新P＞＜／

在对ASP＞＜／

1
2
3
4
5
6
7
8
9
10
11

$('.multiplesubmit').click(function () {
var correctAnswers = $(this).next('ul').children('li').filter(function () {
return $(this).hasClass('True') && $(this).find('input[type="checkbox"]:checked').length>0;
});
var wrongAnswers = $(this).next('ul').children('li').filter(function () {
return $(this).hasClass('False') && $(this).find('input[type="checkbox"]:checked').length>0;
});
if (correctAnswers.length>0 && wrongAnswers.length<1) {
alert('found')
}
});

jsfiddleP＞＜／

相关讨论

试试这个：P＞＜／

彩色of the text to change的红色和绿色的放任换，但换上正确的意见，你可以给我任何左incorrect answers like for You & correctP＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$('.multiplesubmit').click(function() {
$.each('input:checkbox[name=checkme]', function(){
if( $(this).is(':checked'){
if( $(this).hasClass('True'){
// CHECKED - CORRECT
$(this).parent().css({ 'color' : 'green' });
}
else{
// CHECKED - INCORRECT
$(this).parent().css({ 'color' : 'red' });
}
}
else{
if( $(this).hasClass('True'){
// UN-CHECKED - INCORRECT
$(this).parent().css({ 'color' : 'red' });
}
else{
// UNCHECKED - CORRECT
$(this).parent().css({ 'color' : 'green' });
}

});
});

相关讨论

将每个复选框individually check this，that是因为你可以有多checked have the true和一流的服务。P＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
$('.multiplesubmit').click(function() {
multipleChoiceCheck();
});
});

function multipleChoiceCheck() {
$(".multiplechoice_answergroup").find("input[type=checkbox]").each(function() {
var $this = $(this);
if($this.prop("checked") && $this.parent().hasClass("True")) {
alert($this.val());
}
});
}

复选框的值differentiate added to the answers to your：P＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<button class="multiplesubmit">Check Answer</button>
<ul class="multiplechoice_answergroup">
<li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 1"> Answer 1
</li>

<li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 2"> Answer 2
</li>

<li class="multiplechoice_answer False"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 3"> Answer 3
</li>

<li class="multiplechoice_answer True"><input class="checkbox" type="checkbox" name="checkbox" value="Answer 4"> Answer 4
</li>

</ul>

JS小提琴exampleP＞＜／

相关讨论