Question

我有一组radiobuttons，数字可以是1到10甚至更多。

按钮创建时使用：

tsconfig.spec.json

否我想要一个表单验证来检查在发送表单之前是否选择了任何选项。我写了下面的JS

"include": [
  "../my-ng-module/**/*.spec.ts",  // Added this
  "**/*.spec.ts",
  "**/*.d.ts"
]

生成单选按钮没有任何问题。 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";
  }
}

真相告诉我用vanilla javascript你会很难用这个父/兄弟DOM操作，如果你有权访问jQuery它是它的核心功能之一......

OR

您可以为每个输入添加不同的ID或数据属性。并像那样访问它们。

即

输入-1 输入-2- 输入-3 ...

JS如果选中单选按钮

3 个答案: