带有js的两个单选按钮的HTML检查值答案

【问题标题】：HTML check values of two radio buttons with js带有js的两个单选按钮的HTML检查值
【发布时间】：2023-04-05 06:27:01
【问题描述】：

我的 HTML 中有两个单选按钮。至少其中一个必须为“是”。我想在用户点击第二个时检查值（如果是“是”，那么我们不在乎，如果是“否”，那么我们必须检查第一个的值是多少）。我尝试使用此 JavaScript 代码，但它不起作用。有人可以帮我吗？谢谢。

    <div class="form-row">
        <div class="form-group col-md-4">
            <label class="form-text">Show email.</label>
        </div>

        <div class="form-group col-md-8">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="radio" name="email" id="yes" value="yes" autocomplete="off" checked="checked"> Yes
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="email" id="no" value="no" autocomplete="off"> No
            </label>
        </div>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-4">
            <label class="form-text">Show number.</label>
        </div>

        <div class="form-group col-md-8">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="radio" name="number" id="yes" value="yes" autocomplete="off" checked="checked"> Yes
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" id="no" value="no" autocomplete="off" onclick="check(this)"> No
            </label>
        </div>
        </div>
    </div>

        <script language='javascript' type='text/javascript'>
            function check(input) {
                if (document.getElementById('email').value == "no" && document.getElementById('number').value == "no") 
                {
                    input.setCustomValidity('One must be yes.');
                } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                        }
                }
        </script>

【问题讨论】：

您在重复 ID（是和否）。这在网络标准中是无效的。
另外，您正试图通过 id 来查找收音机，但它们上没有与其名称匹配的 id。您应该在它们上放置一个通用类，然后找到选定的类。

标签： javascript html radio-button

【解决方案1】：

我认为这样的事情可能会奏效：

        <label class="btn btn-secondary active">
            <input type="radio" name="email" id="firstRadioTrue" value="yes" autocomplete="off" checked="checked"> Yes
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="email" id="firstRadioFalse" value="no" autocomplete="off"> No
        </label> 
        <label class="btn btn-secondary active">
            <input type="radio" name="number" id="secondRadioTrue" value="yes" autocomplete="off" checked="checked"> Yes
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="number" id="secondRadioFalse" value="no" autocomplete="off"> No
        </label>



        <script language='javascript' type='text/javascript'>

        var radioTopOne = document.getElementById('firstRadioTrue');
        var radioTopTwo = document.getElementById('firstRadioFalse');

        var radioOne = document.getElementById('secondRadioTrue');
        var radioTwo = document.getElementById('secondRadioFalse');

        radioOne.addEventListener('click',function(){
            if(radioOne.checked == true && radioTopOne.checked == true){
                alert("BOTH TRUE");
            }
            else if(radioOne.checked == true && radioTopOne.checked == false){
                alert("TOP FALSE, BOT TRUE");
            };
        });
        radioTwo.addEventListener('click',function(){
            if(radioTwo.checked == true && radioTopTwo.checked == true){
                alert("BOTH FALSE");
            }
            else if(radioTwo.checked == true && radioTopTwo.checked == false){
                alert("BOT FALSE, TOP TRUE");
            }
        });




    </script>

【讨论】：

【解决方案2】：

目前，您没有带有id“电子邮件”的元素，也没有任何带有id“号码”的元素。你应该给你在if 语句中使用的两个单选按钮一个id，你可以用它来检查它们是否被选中（HTMLInputElement.checked）。 input 的值将始终相同，即使它们没有被选中。

 <div class="form-row">
        <div class="form-group col-md-4">
            <label class="form-text">Show email.</label>
        </div>

        <div class="form-group col-md-8">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="radio" name="email" id="showemailyes" value="yes" autocomplete="off" checked="checked"> Yes
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="email" id="showemailno" value="no" autocomplete="off"> No
            </label>
        </div>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-4">
            <label class="form-text">Show number.</label>
        </div>

        <div class="form-group col-md-8">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="radio" name="number" id="shownumberyes" value="yes" autocomplete="off" checked="checked"> Yes
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" id="shownumberno" value="no" autocomplete="off" onclick="check(this)"> No
            </label>
        </div>
        </div>
    </div>

        <script language='javascript' type='text/javascript'>
            function check(input) {
                if (document.getElementById('showemailno').checked && document.getElementById('shownumberno').checked) 
                {
                   alert("One must be yes.");
                    input.setCustomValidity('One must be yes.');
                } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                        }
                }
        </script>

【讨论】：