Return Javascript if only one checkbox is checked from the list of possible checkboxes
I have a list of checkboxes that require one or two specific fields to be validated in order to return true, however I am not sure how to find information about whether only the fields you want are validated and no other fields.
HTML for checkboxes:
<table style="width:135px; height:200px; margin: 0 auto; margin-top: -200px;">
<tr>
<td><input type="checkbox" class="f1s1c"></td>
<td><input type="checkbox" class="f1s2"></td>
<td><input type="checkbox" class="f1s3"></td>
<td><input type="checkbox" class="f1s4"></td>
</tr>
<tr>
<td><input type="checkbox" class="f2s1"></td>
<td><input type="checkbox" class="f2s2"></td>
<td><input type="checkbox" class="f2s3"></td>
<td><input type="checkbox" class="f2s4"></td>
</tr>
<tr>
<td><input type="checkbox" class="f3s1"></td>
<td><input type="checkbox" class="f3s2"></td>
<td><input type="checkbox" class="f3s3"></td>
<td><input type="checkbox" id="cCorrect1"></td>
</tr>
<tr>
<td><input type="checkbox" class="f4s1"></td>
<td><input type="checkbox" class="f4s2"></td>
<td><input type="checkbox" class="f4s3"></td>
<td><input type="checkbox" class="f4s4"></td>
</tr>
</table>
As you can see, there are many possible chekboxes, however in this case only cCorrect1 needs to be checked for the javascript to return true. All other checkboxes are classes, since I have multiple tables that follow the same structure.
Currently my Javascript returns true if cCorrect1 is checked, but obviously also returns true if another checkbox is checked along with it.
My Javascript:
//Quiz Functions
$("#checkC").click(function(){
if(cCorrect1.checked){
cCorrect = true;
}else if(cCorrect1.checked == false){
cCorrect = false;
}
});
Will an array be used that checks the checkboxes and knows when cCorrect1 is checked? I think this might be on the right track, but I don't know how to do it.
Any input and help is greatly appreciated.
source to share
Assuming you have a way to find the correct set of checkboxes (common class for all of them, etc.), you can count the number of checked cells in the list. If he is 1
, and your target field is checked, you are good.
In this example, I've added a id
to table
containing checkboxes to make them easier to find. Removed the style to make the table visible.
$("#checkC").click(function(){
// the one we want
var cCorrect1 = $('#cCorrect1');
// all checked checkboxes in the table
var checks = $('#boxes input[type=checkbox]:checked');
var cCorrect = cCorrect1.prop('checked') && (checks.length == 1);
alert(cCorrect ? "correct" : "incorrect");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="boxes" >
<tr>
<td><input type="checkbox" class="f1s1c"></td>
<td><input type="checkbox" class="f1s2"></td>
<td><input type="checkbox" class="f1s3"></td>
<td><input type="checkbox" class="f1s4"></td>
</tr>
<tr>
<td><input type="checkbox" class="f2s1"></td>
<td><input type="checkbox" class="f2s2"></td>
<td><input type="checkbox" class="f2s3"></td>
<td><input type="checkbox" class="f2s4"></td>
</tr>
<tr>
<td><input type="checkbox" class="f3s1"></td>
<td><input type="checkbox" class="f3s2"></td>
<td><input type="checkbox" class="f3s3"></td>
<td><input type="checkbox" id="cCorrect1"></td>
</tr>
<tr>
<td><input type="checkbox" class="f4s1"></td>
<td><input type="checkbox" class="f4s2"></td>
<td><input type="checkbox" class="f4s3"></td>
<td><input type="checkbox" class="f4s4"></td>
</tr>
</table>
<button id="checkC">check</button>
source to share
What you can do is create an array of correct answers, find the selected answers in the row, and decide if it is right or wrong.
You can use this code to return an array of state flags (0 for unchecked, 1 for checked) and decide what to do from there:
var $table = this.$('tbody');
$(".resultBtn").click(function(){
var outStr = '';
for(var i= 0,len=$table.children().length;i<len;i++){
var $tr = $table.children().eq(i);
outStr += 'row' + (i+1) + ' checked boxes:[';
for(var j= 0;j<$tr.children().length;j++){
var $td = $tr.children().eq(j);
if($td.find(':checked').length > 0 ){
$td.addClass('selected');
outStr += '1,';
} else{
outStr += '0,';
}
if(j==$tr.children().length-1) outStr = outStr.substring(0, outStr.length - 1);
}
outStr += ']';
}
alert(outStr);
});
Example: http://jsfiddle.net/y3yp4ag1/2/
source to share