Javascript 如果选中单选按钮，则返回JS

我有一套单选按钮，数字可以是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>

”；
foreach（$\会话['bedrijf']作为$value）
{
回声'；
}
回声'

否我希望在发送表单之前进行表单验证，以检查是否选择了任何选项。 我已经写了下面的JS

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

函数validate_add（）
{
//贝德里杰夫
如果（document.getElementById（'add_-bedrijf'）.checked）{document.getElementById（'div_-bedrijf'）.className=“表单组有警告有反馈”；document.getElementById（'add_-bedrijf'）.className=“Glypicon警告标志表单控制反馈”}
其他的
{document.getElementById（'div_add_bedrijf'）。className=“表单组有成功的反馈”document.getElementById（'add_bedrijf_status'）。className=“Glypicon Glypicon ok表单控制反馈”}
}

单选按钮的生成没有任何问题。 JS脚本没有按我希望的那样工作。即使没有选中任何按钮，脚本也会运行else语句

有什么建议吗？

在这一行：

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

）

不要在所有输入上使用相同的id，这将导致getElementById始终检查相同的元素，不管有多少个元素

您必须以某种方式区分输入，或者只是将元素的上下文传递给函数，如

validate\u 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";
  }
}

老实说，使用vanilla javascript，您将很难处理这种父级/同级DOM操作，如果您能够访问jQuery，这是它的核心功能之一

或

您可以向每个输入添加不同的id或数据属性。然后像那样访问它们

i、 e

输入-1 投入-2

---

input-3…

首先，我要确保每个单选按钮都有一个唯一的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>

我可以看到您正在php
foreach
中创建元素，您应该确保这不会导致多个元素具有相同的
id
，因为
id
应该是唯一的。好的，我可能同意这一点，但是如何在JS中检查不同id的数量？该div中的图标是正确的，我认为错误在'if（document.getElementById（'add_bedrijf'）.checked）'input-1input-2input-3.>>好吧>>但我不知道现在有多少，那么如何检查JS中的所有现有内容呢？好吧，你的PHP知道，所以你在PHP中创建了不同的ID，但我建议你使用我编写的函数。感谢你的努力Jeffrey！
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');

            }
        }
    }