CODEWITHSUNDEEP
javascripthtml
DineshMsd
DineshMsd

Reputation: 140

How to Display multiple checkbox values in javascript

I need to show the multiple selected checkbox values in bootstrap alert. Now I Displaying only one checkbox value in alert.

This HTML code contains the question and four options. I need to display two options in bootstrap alert.I have facing much more difficulties with solving this problem.

In this I need to display the correct answers banana and apple.thanks!

function validate()
            { 
              // debugger;

                 var b1 = document.getElementById("op1").checked;
                 var b2 = document.getElementById("op2").checked;
                 var b3 = document.getElementById("op3").checked;
                 var b4 = document.getElementById("op4").checked;


              if ((b1 == false && b2 == false && b3 == false && b4 == false))
                    {
                          // Alert message by displaying 
                    // error message 
                    $("#msg").html('<span class="alert alert-danger alert-dismissible fade show" id="alert1">'+ '<span class="red-alert-txt">Please select Atleast One option</span>' + 
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ '<span aria-hidden="true" >×</span></button></span>'); 
                        return false;
                    }
                    else
                    {
                        

                          var checkboxvalue = $("input[name='checkboxdemo']:checked").val();
                
                /*default slelcted value displayer*/
                if (checkboxvalue) { 
                    $("#msg").html( '<span class="alert alert-primary alert-dismissible fade show" id="alert3">'+ '<strong>Selected :</strong>' 
                        + checkboxvalue +'</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ '<span aria-hidden="true" >×</span></button></span>'); 

                    if (checkboxvalue == 'banana') 
                    { 
                    
                        // Validation message for correct choice 
                        $("#ans").html( '<span class="alert alert-success alert-dismissible fade show" id="alert4">'+ 'Your Answer is correct ! <b>:</b> <strong>' + checkboxvalue + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ '<span aria-hidden="true" >×</span></button></span>'); 
                    }
                    else 
                    { 
                    
                        // Validation message for wrong choice 
                        $("#ans").html( '<span class="alert alert-warning alert-dismissible fade show" id="alert5">'+ 'Warning ..! You Have Made Wrong Choise : <strong>' + checkboxvalue + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ '<span aria-hidden="true" >×</span></button></span>'); 
                    } 
                }     


                    }
               
            }
<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8"> 
    
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1"> 

                <!--  -->
    
    <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> 
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> 
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> 
  
</head>

<body>
    <h4>select fruits from the following</h4>
        <form name="quiz" id="quiz" method="post">
            <table>
             
                <tr>
                    <td>
                        <input type="checkbox" id="op1" name="checkboxdemo" value="banana"> banana
                        <input type="checkbox" id="op2" name="checkboxdemo" value="brinjal"> brinjal
                        <input type="checkbox" id="op3" name="checkboxdemo" value="apple"> apple
                        <input type="checkbox" id="op4" name="checkboxdemo" value="tomato"> tomato           
                    </td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Finished!" onclick="return validate()">
                        <input type="reset" id="reset">
                               

                        <div class="mt-3" id="msg"></div> 
                        <div class="mt-3" id="ans"></div> 

                    </td>
                </tr>
            </table>
        </form> 
</body>
</html>

Upvotes: 1

Views: 1061

Answers (1)

Narendra Solanki
Narendra Solanki

Reputation: 1202

You should loop through the selected value

let arr = [];
  $("input[name='checkboxdemo']:checked").each(function(){
    arr.push($(this).val());
  });


function validate() {
    // debugger;

    var b1 = document.getElementById("op1").checked;
    var b2 = document.getElementById("op2").checked;
    var b3 = document.getElementById("op3").checked;
    var b4 = document.getElementById("op4").checked;


    if ((b1 == false && b2 == false && b3 == false && b4 == false)) {
        // Alert message by displaying 
        // error message 
        $("#msg").html('<span class="alert alert-danger alert-dismissible fade show" id="alert1">' + '<span class="red-alert-txt">Please select Atleast One option</span>' +
            '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' + '<span aria-hidden="true" >×</span></button></span>');
        return false;
    } else {


        var checkboxvalue = $("input[name='checkboxdemo']:checked").val();

        
      let arr = [];
      $("input[name='checkboxdemo']:checked").each(function(){
        arr.push($(this).val());
      });
      
      if (arr) {
            $("#msg").html('<span class="alert alert-primary alert-dismissible fade show" id="alert3">' + '<strong>Selected :</strong>' +
                arr + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">' + '<span aria-hidden="true" >×</span></button></span>');

            if (checkboxvalue == 'banana') {

                // Validation message for correct choice 
                $("#ans").html('<span class="alert alert-success alert-dismissible fade show" id="alert4">' + 'Your Answer is correct ! <b>:</b> <strong>' + checkboxvalue + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">' + '<span aria-hidden="true" >×</span></button></span>');
            } else {

                // Validation message for wrong choice 
                $("#ans").html('<span class="alert alert-warning alert-dismissible fade show" id="alert5">' + 'Warning ..! You Have Made Wrong Choise : <strong>' + checkboxvalue + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">' + '<span aria-hidden="true" >×</span></button></span>');
            }
        }

    }

}
<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8"> 
    
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1"> 

                <!--  -->
    
    <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> 
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> 
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> 
  
</head>

<body>
    <h4>select fruits from the following</h4>
        <form name="quiz" id="quiz" method="post">
            <table>
             
                <tr>
                    <td>
                        <input type="checkbox" id="op1" name="checkboxdemo" value="banana"> banana
                        <input type="checkbox" id="op2" name="checkboxdemo" value="brinjal"> brinjal
                        <input type="checkbox" id="op3" name="checkboxdemo" value="apple"> apple
                        <input type="checkbox" id="op4" name="checkboxdemo" value="tomato"> tomato           
                    </td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Finished!" onclick="return validate()">
                        <input type="reset" id="reset">
                               

                        <div class="mt-3" id="msg"></div> 
                        <div class="mt-3" id="ans"></div> 

                    </td>
                </tr>
            </table>
        </form> 
</body>
</html>

Upvotes: 1

Related Questions