JavaScriptオーダーの問題

Question

JavaScriptコードのかなり単純な部分が2つあります。両方ともフォームのチェックボックスを制御します。私はいくつかのユーザテストがあるRailsアプリを書いています。他のボックスがチェックされている場合、チェックボックスをオフにする必要があります。たとえば、「true」がチェックされている場合、「false」をチェックすることもできません。 JavaScriptは、選択すると他のオプションのチェックを外します。ものすごく単純。

JavaScriptコードは2つあります。最初のセクションでは、複数選択のチェックを解除します。 2番目のセクションでは、真偽の質問のチェックを外します。

コードの両方のセクションが機能します。しかし、一方を他方の前に置くと、2番目のセクションは機能しません。これは両方向で発生します。 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

コードに基づいて、チェックボックスの代わりにラジオボタンを使用すると問題が解決するようです。チェックボックスのようにラジオボタンが必要な場合は、次の記事をチェックしてください：Can you style an html radio button to look like a checkbox?