mardi 17 avril 2018

How to get the values of multiple chechboxes and compare them

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