<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