limiting checkboxes to one html javascript

Question

I have a list of checkboxes which I want to limit 1 checkbox only being able to be selected, I found a piece of javascript that is suppose to do this but have not been able to impolement it successfully below is what I have tried without luck.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        function control(j) {
            var total=0;
            for(var i=0; i < document.form1.ckb.length; i++){
                if(document.question.ckb[i].checked){
                    total =total +1;}
                if(total > 1){
                    alert("Please Select only one")
                    document.question.ckb[j].checked = false ;
                    return false;
                }
            }
        } </script>
</head>
<body>
<header>

</header>

<div id='wrapper'>

<section id='description'>
    <p>This quiz is compossed by 10 questions, you have to answer at least 7
        from 10 to pass the exam.</p>
    <h2>Good luck!</h2>
</section>

<div id='questions-number'>
    <p>Question <span id='current-question'>1</span> of <span>10</span> </p>
</div>

<section id='questions'>
    <p id='question'></p>

    <ul>
        <li><input type='checkbox' id='checkAnswer0' name = ckb answer0 value=0 onclick=' control(0)'/><label id='answer0'>answer0</label></li>
        <li><input type='checkbox' id='checkAnswer1' name = ckb answer0 value=1 onclick=' control(2)'/><label id='answer1'>answer0</label></li>
        <li><input type='checkbox' id='checkAnswer2' name = ckb answer0 value=2 onclick=' control(3)'/><label id='answer2'>answer0</label></li>
        <li><input type='checkbox' id='checkAnswer3' name = ckb answer0 value=4 onclick=' control(4)'/><label id='answer3'>answer0</label></li>
    </ul>
</section>

<div id='next'>
    next
</div>

</div>
<script type = "text/javascript" src="js/jquery-1.9.1.js"></script>
<script type = "text/javascript" src= "js/question_script.js"></script>
</body>
</html>

That's why they invented radio buttons. – Lee Taylor May 04 '13 at 00:07 — Lee Taylor, May 04 '13 at 00:07

score 1 · Answer 1 · answered May 04 '13 at 01:45

First you don't have a form in your html, your script won't work as you are accessing the check boxes using form, to correct this you can edit your script to be:

<script type="text/javascript">
    function control(j) {
        var total=0;
        var ckbs = document.getElementsByName('ckb');
        for(var i=0; i < ckbs.length; i++){
            if(ckbs[i].checked)
            {
                total =total +1;
            }
            if(total > 1)
            {
                alert("Please Select only one");
                ckbs[i].checked = false ;
                return false;
            }
        }
    } 
</script>

Also you need to fix the name of your check boxes (you are not using quotes):

<li><input type='checkbox' id='checkAnswer0' name ="ckb" value=0 onclick=' control(0)'/><label id='answer0'>answer0</label></li>
<li><input type='checkbox' id='checkAnswer1' name ="ckb" value=1 onclick=' control(2)'/><label id='answer1'>answer0</label></li>
<li><input type='checkbox' id='checkAnswer2' name ="ckb" value=2 onclick=' control(3)'/><label id='answer2'>answer0</label></li>
<li><input type='checkbox' id='checkAnswer3' name ="ckb" value=4 onclick=' control(4)'/><label id='answer3'>answer0</label></li>

Finally using radio buttons will make much sense in your case!

limiting checkboxes to one html javascript

1 Answers1