ラジオボタンがチェックされている場合は

Question

私はラジオボタンのセットを持っていますが、その数は1から10までです。フォームが送信される前に、私は任意のオプションが選択されているかどうかを確認するために、フォームの検証をしたいと思います

<div class="form-group btn-group has-feedback" id="div_add_bedrijf" data-toggle="buttons">'; 
    foreach ($_SESSION['bedrijf'] as $value) 
    { 
     echo '<label class="btn btn-secondary"><input type="radio" id="add_bedrijf" name="add_bedrijf" value="'.$value.'" onclick="validate_add()" onmousemove="validate_add()"><img src="images/logo_'.$value.'_small.png" height="30"></label>'; 
    } 
echo '<span class="glyphicon glyphicon-warning-sign form-control-feedback" id="add_bedrijf_status"> 
</div> 

番号：

ボタンを使用して作成されます。 私は

<script type="text/javascript"> 
function validate_add() 
{ 
    // bedrijf 
    if(document.getElementById('add_bedrijf').checked) { document.getElementById('div_bedrijf').className = "form-group has-warning has-feedback"; document.getElementById('add_bedrijf_status').className = "glyphicon glyphicon-warning-sign form-control-feedback"; } 
    else 
    { document.getElementById('div_add_bedrijf').className = "form-group has-success has-feedback"; document.getElementById('add_bedrijf_status').className = "glyphicon glyphicon-ok form-control-feedback"; } 
} 
</script> 

の下のラジオボタンは何の問題もなく生成されているJSを書かれています。 JSスクリプトが私の望むように機能しません。どのボタンもチェックされていなくても、スクリプトはelseステートメントを実行しています。

提案がありますか？この行で

Answer 1

まず第一に、私は次のようにPHPコードを変更し、すべてのラジオボタンは、一意のIDを持っていることを確認します：その後

<div class="form-group btn-group has-feedback" id="div_add_company" data-toggle="buttons"> 
    <?php 
    $i = 0; 
    foreach($_SESSION['company'] as $value) 
    { 
     ?> 
     <label class="btn btn-secondary" for="add_company_<?php echo $i;?>"> 
      <input type="radio" id="add_company_<?php echo $i;?>" name="add_company" value="<?php echo $value;?>" onclick="validate_add()" onblur="validate_add()" /> 
      <img src="images/logo_<?php echo $value;?>_small.png" alt="<?php echo $value;?>" height="30"/> 
     </label> 
     <?php 
     $i++; 
    } 
    ?> 

    <span class="glyphicon glyphicon-warning-sign form-control-feedback" id="add_company_status"></span> 
</div> 

私はこれにJavascriptを更新します：

function validate_add() { 
     // Parent div of all buttons 
     let div_add_company = document.getElementById('div_add_company'); 
     // Status div 
     let add_company_status = document.getElementById('add_company_status'); 
     // A list with all the inputs that start the with id "add_company_" 
     let elements = document.querySelectorAll('input[id^="add_company_"]'); 
     for(let i = 0; i < elements.length; i++) { 
      let element = elements[i]; 
      // If the element is checked 
      if(element.checked) { 
       // Remove the warning 
       div_add_company.classList.remove('has-warning'); 
       // Add success 
       div_add_company.classList.add('has-success'); 
       // Remove the warning icon 
       add_company_status.classList.remove('glyphicon-warning-sign'); 
       // Add the success icon 
       add_company_status.classList.add('glyphicon-ok'); 
       // We found one was selected, so exit the loop 
       return; 
      } else { 
       // Remove the success 
       div_add_company.classList.remove('has-success'); 
       // Add the warning 
       div_add_company.classList.add('has-warning'); 
       // Remove the success icon 
       add_company_status.classList.remove('glyphicon-ok'); 
       // Add the warning icon 
       add_company_status.classList.add('glyphicon-warning-sign'); 

      } 
     } 
    } 

あなたのコードでは、オランダ語と英語を混ぜないことをお勧めします。すべてを英語で保管してください。

Answer 2

：

if(document.getElementById('add_bedrijf').checked) { document.getElementById('div_bedrijf').className = "form-group has-warning has-feedback"; document.getElementById('add_bedrijf_status').className = "glyphicon glyphicon-warning-sign form-control-feedback"; } 

document.getElementById('div_add_bedrijf').classNameにdocument.getElementById('div_bedrijf').classNameを変更してみてください。 ）

Answer 3

すべての入力に同じIDを使用しないでください。これにより、getElementByIdは、そこにいくつあっても同じ要素を常にチェックします。

入力を区別したり、要素のコンテキストをvalidate_add.call(this)のような関数に渡したりするだけです。こうすることで、DOM関数を使用して要素を再度検索することなく、各要素に集中することができます。あなたはjQueryのへのアクセスを持っている場合、それはの一つであり、あなたは、この親/兄弟DOM操作に苦労するだろうjavascriptの

function validate_add(element) { 
    if (element.checked) { 
    element.className = "form-group has-warning has-feedback"; 
    document.getElementById('add_bedrijf_status').className = "glyphicon glyphicon-warning-sign form-control-feedback"; 
    } 
    else { 
    document.getElementById('div_add_bedrijf').className = "form-group has-success has-feedback"; 
    document.getElementById('add_bedrijf_status').className = "glyphicon glyphicon-ok form-control-feedback"; 
    } 
} 

真実はバニラと言われる：機能で

、あなたは次のようなものを持っているでしょうそのコア機能...

OR

あなたは、各入力に異なるIDのか、データの属性を追加することができます。そして、そのようにアクセスしてください。

入力-1 入力-2 入力-3すなわち

...