vendredi 9 juin 2017

JavaScript order issues

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