I have a number of checkbox's, but I am limiting user to be able to select 2 checkbox.
I am working on like matching game. User will have 5 options (checkbox's); When user select the 2 options, I will do a match with my correct values, and if user have selected the right checkboxes, I can move to next question.
I have a code which only limit user to select two checkbox. But I don't know how to do next. This is where we should get the values user selected, match with the correct values, and if there is a match, moves to next question.
The checkbox are generated in a foreach loop
HTML + PHP
<?php
$xname = 1;
foreach($namesarray as $key => $value2){ ?>
<tr>
<td colspan="2" style="text-align:center;">
<div class="sitelocationmatch">
<label>
<input type="checkbox" class="signlocation-<?php echo $x; ?>" name="signlocation" locationname="<?php echo $value2["name_sts"] ?>" nnumber="<?php echo $nnumber ?>"><span><?php echo $value2["name_sts"] ?></span>
</label>
</div>
</td>
</tr>
<?php
$xname++;
}
?>
JavaScript
<script>
$('input.signlocation-<?php echo $x; ?>').on('change', function(evt) {
//actual answers
var actuallocationname = "The Maple";
var actualnnumber = "N2";
//when the checkbox is checked, get the attr value
if (this.checked) {
var name = $(this).attr("locationname");
var number = $(this).attr("nnumber");
}else{
}
var max= 2;
if( $("input[name=signlocation]:checked").length == max ){
$("input[name=signlocation]").attr('disabled', 'disabled');
$("input[name=signlocation]:checked").removeAttr('disabled');
alert(name);
if (name == actuallocationname && number == actualnnumber ){
alert("match");
}
}else{
}
});
</script>
The code limits user to select 2 values; How I do next stage where the 2 selected values should be compared with actual values.
Thanks
Aucun commentaire:
Enregistrer un commentaire