JS如果單選按鈕被選中

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

首先，我會確保每個單選按鈕有一個唯一的ID，改變你的PHP代碼如下：

<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_bedrijf').className到document.getElementById('div_add_bedrijf').className; ）

Answer 3

不要在所有輸入中使用相同的id，這會導致您的getElementById總是檢查相同的元素，無論有多少。

您必須以某種方式區分您的輸入，或者僅將一個元素的上下文傳遞給像validate_add.call(this)這樣的函數。這樣你就可以專注於每個元素而不必使用dom函數來再次查找元素。

在功能，那麼你會碰到這樣的：

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"; 
    } 
} 

真相與香草告訴JavaScript的你會很難與此父/同級DOM操作，如果您有jQuery的訪問它是一個它的核心功能...

OR

您可以添加不同的ID或數據屬性的每個輸入。並像那樣訪問它們。

即

輸入1 輸入2 輸入3 ...