Javascript checkbox validations

Question

I am new to JS. How to validate check box, radio button. I created the choose the best answers questions. I used radio buttton and check box for answers. Anyone give the explainations.

This is my code:

<body> 
<div id="qn1">1. What are JavaScript types?</div> <div id="ans">
<input type="checkbox" id="n1">Number</input><br/> 
<input type="checkbox" id="B1">Boolean</input><br/> 
<input type="checkbox" id="F1">Function</input><br/> 
<input type="checkbox" id="u1">Undefined</input><br/> 
<input type="checkbox" id="a1">All the above</input><br/><br/> 
<button onclick="toCheck()">Check</button> 
<button onclick="toShow()">Show Answer</button> 
</div> 
</body>

Thanks

1. What are JavaScript types?
Number
Boolean
Function
Undefined
All the above — NalluJi, Jan 28 '15 at 07:28
Welcome to StackOverflow. Please read this: http://stackoverflow.com/help/how-to-ask in order to avoid future downvotes and increase the likelihood of your questions actually getting answered — Wottensprels, Jan 28 '15 at 07:30

score 0 · Answer 1 · edited May 23 '17 at 11:43

Well to do it, you have to make some few changes to your HTML first:

Add class and value attributes to your checkbox elements.
Then use the following Javascript function to get checked values from your answers:

function toShow(){
    var checkedValues=[];
    var answers=document.getElementsByClassName("answers");
    for(var i=0;i<answers.length;i++){
        if(answers[i].checked){
            checkedValues.push(answers[i].value);
         }
    }  
    alert(checkedValues);
 }

<div id="qn1">1. What are JavaScript types?</div> 
<div id="ans">
     <input type="checkbox" class="answers" id="n1" value="Number">Number</input><br/> 
     <input type="checkbox" class="answers" id="B1" value="Boolean">Boolean</input><br/> 
     <input type="checkbox" class="answers" id="F1" value="Function">Function</input><br/> 
     <input type="checkbox" class="answers" id="u1" value="Undefined">Undefined</input><br/> 
     <input type="checkbox" class="answers" id="a1" value="All the above">All the above</input><br/><br/> 
     <button onclick="toCheck()">Check</button> 
     <button onclick="toShow()">Show Answer</button> 
</div>

EDIT:

If you want to select only one answer at once, here's a function that uses jQuery inspired from this answer should do it :

$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
  var group = "input:checkbox[class='" + $box.attr("class") + "']";
  $(group).prop("checked", false);
  $box.prop("checked", true);
} else {
  $box.prop("checked", false);
}
alert($box.val());
});

Try this DEMO.

I wish to check only one checkbox at a time. If once I selected one checkbox other boxes are want to disabled. — NalluJi, Jan 29 '15 at 07:06
In that case using input radio will be better, but I think in your case many answers can be selected at once? no? But if that's what you want take a look at my EDIT. — cнŝdk, Jan 29 '15 at 07:35

score -1 · Answer 2 · answered Jan 28 '15 at 07:29

-1

you can use this if you know jQuery

$("input[name='NAME_OF_CHECKBOX']:checked")each(HERE GOES THE FURTHER CODE);

answered Jan 28 '15 at 07:29

MegaMind

653
6
31

1

Sure they are. But personally, I believe it is not a good idea to shove down the entire jQuery library down a newbies throat just because it is so easy to work with. The OP is clearly a novice, so I would avoid overwhelming him with new information when he doesn't even have a basic idea about the language. Just my 2 cents, though, no offense :) – Wottensprels Jan 28 '15 at 07:33
Yes, maybe you are right. justifies your downvote. But personally i learnt jQuery before javascript. anyways, i will keep your advice in mind. – MegaMind Jan 28 '15 at 07:38

Javascript checkbox validations

2 Answers2