jeudi 12 novembre 2015

Select only one checkbox in each checkbox group in javascript

<script>
function tryThis(element){

    if(element.checked){
        element.classList.add("marked");
    }else{
        element.classList.remove("marked");
    }

    if(document.getElementsByClassName("marked").length>1){
      alert("Please select only one check box");
        element.checked=false;
        element.classList.remove("marked");
    }
    if(document.getElementsByClassName("marked").length==0){
         alert("Please select one check box");
    }
}
</script>
<div>
<input type="checkbox" name="gender" value="male" onclick="tryThis(this);"/>
<input type="checkbox" name="gender" value="female" onclick="tryThis(this);"/>
<input type="checkbox" name="gender" value="unknown" onclick="tryThis(this);"/>
</div>

<div>
<input type="checkbox" name="report" value="no" onclick="tryThis(this);"/>
<input type="checkbox" name="report" value="yes" onclick="tryThis(this);"/>
<input type="checkbox" name="report" value="other" onclick="tryThis(this);"/>
</div>

This is a small example of the code I've been trying out (I found this function from another thread). The problem I have here is that I want one checkbox from each checkboxgroup to be selected but it turns out that one checkbox is being selected for all groups i.e when I select 'male' in 'gender' I should be able to select 'yes' in report but that's not happening. What am I missing here?




Aucun commentaire:

Enregistrer un commentaire