如何使用JavaScript验证HTML中的单选按钮？

Question

how can i validate the input of radio button? Currently,i doing a survey form using radio button. I have try many way to validate the radio but all the code are unusable. Anyone can help?TQ. Below is my code

 var f = document.frmSubmit; var radios = document.getElementsByName('appbk') for (var i = 0; i < radios.length; i++) { if (document.getElementById("appbk") == false) { alert('Remarks has exceeded allowable radio characters.'); f.appbk.focus(); return false; // checked } } if (f.FEEDBACK_MSG.value != "" ) { if (f.FEEDBACK_MSG.value.length > 500 ){ bootbox.alert('Remarks has exceeded allowable maximum characters.'); f.FEEDBACK_MSG.focus(); return false; } } return true; document.getElementById("btnsubmit").disabled = true; } 

 <tr> <td><div class="text2">Appointment Booking </div></td> <td><div class="text3"> <span style="margin:0 30px;"><input type="radio" id="appbk1" name="appbk" value="1"><lable>1</lable></span> <span style="margin:0 30px;"><input type="radio" id="appbk2" name="appbk" value="2"><lable>2</lable></span> <span style="margin:0 30px;"><input type="radio" id="appbk3" name="appbk" value="3"><lable>3</lable></span> <span style="margin:0 30px;"><input type="radio" id="appbk4" name="appbk" value="4"><lable>4</lable></span> <span style="margin:0 30px;"><input type="radio" id="appbk5" name="appbk" value="5"><lable>5</lable></span> </div> </td> </tr> 

Answer 1

id应该是唯一的，您可以使用document.getElementById（'单选按钮的id'）。checked来设置单选按钮的值（是或否）。也可以像radios [i] .checked == false这样的数组单选代替文档。 getElementById（“ appbk”）==否

Answer 2

This depends on when you want to validate, however, on the click of your forms submit button, I would do a function onclick for the button. If any field checks aren't selected (using a for loop and boolean set to true on check), then prevent the default button action of a href and instead display a div with an error message in. This way, the form will also keep its previous data.

Answer 3

try this.... jsfiddle

$('.submit').click(function(e){
if($('input[name="myRadio"]:checked', '#myForm').val()!==undefined){
alert('submited');
}
else{
alert('enter your choice');
}
});

Answer 4

You can check the link posted by RAYON DABRE as his code is working perfectly.

OR

You just have to check the records selected or not based on your requirement. A sample code has been added for your reference

function funcheckvalidate() {
        if (document.getElementById('btnSubmit').checked == true) {
            alert('button checked');
        } else if (document.getElementById('btnSubmit').checked  == false) {
            alert('button not checked');
        }
    }

HTML for the same

<table>
    <tr>
        <td>
            <div class="text2">
                Appointment Booking
            </div>
        </td>
        <td>
            <div class="text3">
                <span style="margin: 0 30px;">
                    <input type="radio" id="appbk1" name="appbk" value="1"><lable>1</lable></span>
                <span style="margin: 0 30px;">
                    <input type="radio" id="appbk2" name="appbk" value="2"><lable>2</lable></span>
                <span style="margin: 0 30px;">
                    <input type="radio" id="appbk3" name="appbk" value="3"><lable>3</lable></span>
                <span style="margin: 0 30px;">
                    <input type="radio" id="appbk4" name="appbk" value="4"><lable>4</lable></span>
                <span style="margin: 0 30px;">
                    <input type="radio" id="appbk5" name="appbk" value="5"><lable>5</lable></span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" id="btnSubmit" value="submit" style="width: 75px;" onclick="return funcheckvalidate()" />
        </td>
    </tr>
</table>