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 ...