JavaScript 顺序问题

Question

我有两个相当简单的JavaScript代码部分。它们都控制表单的复选框。我正在编写一个Rails应用程序，其中包含一些用户测试。如果选中了其他框，我需要取消选中复选框。例如，如果选中"true"，我不能也选中"false"。当您做出选择时，JavaScript 将取消选中其他选项。很简单。

我有两部分JavaScript代码。第一部分控制取消选中多项选择。第二部分控制取消选中真/假问题。

代码的两个部分都有效。但是，如果我将一个放在另一个前面，第二部分将不起作用。这发生在两个方向上。如果 A 在 B 前面，B 将不起作用。如果 B 在 A 前面，则 A 将不起作用。

有人能看到可能导致这种情况的原因吗？帮助！

// 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);

Answer 1

根据您的代码，似乎使用单选按钮而不是复选框可以解决您的问题。 如果您需要单选按钮看起来像复选框，请查看：您可以将 html 单选按钮的样式设置为看起来像复选框吗？