I have two fairly simple portions of JavaScript code. They both control checkboxes for forms. I am writing a Rails app that has some user tests in them. I need checkboxes to be unchecked if other boxes are checked. For example, if "true" is checked, I can not also have "false" checked. The JavaScript will uncheck other options when you make a selection. Pretty simple.
I have two portions of JavaScript code. The first section controls unchecking for multiple choice. The second section controls unchecking for true/false questions.
Both sections of code work. However, if I put one in front of the other, the second section won't work. This happens in both directions. If A is infront of B, B won't work. If B is in front of A, A won't work.
Can someone see what could be causing this? Help!
// controls multiple choice uncheck for tests
function option1_checker(){
if(document.getElementById('option1_checkbox').checked){
$('#option2_checkbox').attr('checked', false);
$('#option3_checkbox').attr('checked', false);
}
}
var option1 = document.getElementById('option1_checkbox');
option1.addEventListener('click', option1_checker);
function option2_checker(){
if(document.getElementById('option2_checkbox').checked){
$('#option1_checkbox').attr('checked', false);
$('#option3_checkbox').attr('checked', false);
}
}
var option2 = document.getElementById('option2_checkbox');
option2.addEventListener('click', option2_checker);
function option3_checker(){
if(document.getElementById('option3_checkbox').checked){
$('#option1_checkbox').attr('checked', false);
$('#option2_checkbox').attr('checked', false);
}
}
var option3 = document.getElementById('option3_checkbox');
option3.addEventListener('click', option3_checker);
// controls true false uncheck for tests
function false_checker(){
if(document.getElementById('false_checkbox').checked){
$('#true_checkbox').attr('checked', false);
}
}
var false_check = document.getElementById('false_checkbox');
false_check.addEventListener('click', false_checker);
function true_checker(){
if(document.getElementById('true_checkbox').checked){
$('#false_checkbox').attr('checked', false);
}
}
var true_check = document.getElementById('true_checkbox');
true_check.addEventListener('click', true_checker);
Aucun commentaire:
Enregistrer un commentaire