Làm cách nào để kiểm tra xem nút radio có được chọn bằng JavaScript không?

Tôi có hai nút radio trong một biểu mẫu HTML. Một hộp thoại xuất hiện khi một trong các trường là null. Làm cách nào để kiểm tra xem nút radio có được chọn không?

Hãy giả vờ rằng bạn có HTML như thế này

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

Để xác thực phía máy khách, đây là một số Javascript để kiểm tra xem cái nào được chọn:

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

Những điều trên có thể được thực hiện hiệu quả hơn tùy thuộc vào bản chất chính xác của đánh dấu của bạn nhưng điều đó là đủ để bạn bắt đầu.

Nếu bạn chỉ muốn xem liệu có bất kỳ nút radio nào được chọn ở bất kỳ đâu trên trang không, PrototypeJS làm cho nó rất dễ dàng.

Đây là một chức năng sẽ trả về đúng nếu có ít nhất một nút radio được chọn ở đâu đó trên trang. Một lần nữa, điều này có thể cần phải được điều chỉnh tùy thuộc vào HTML cụ thể của bạn.

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').size() > 0);
}

Để xác thực phía máy chủ (hãy nhớ, bạn không thể phụ thuộc hoàn toàn vào Javascript để xác thực!) , Nó sẽ phụ thuộc vào ngôn ngữ bạn chọn, nhưng bạn sẽ kiểm tra gendergiá trị của chuỗi yêu cầu.

Với jQuery , nó sẽ giống như

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

Hãy để tôi chia nó thành nhiều phần để bao quát nó rõ ràng hơn. jQuery xử lý mọi thứ từ trái sang phải.

input[name=gender]:checked

1. input giới hạn nó vào thẻ đầu vào.
2. [name=gender] giới hạn nó trong các thẻ có tên giới tính trong nhóm trước.
3. :checked giới hạn nó trong các hộp kiểm / nút radio được chọn trong nhóm trước.

Nếu bạn muốn tránh điều này hoàn toàn, hãy đánh dấu một trong các nút radio là đã chọn ( checked="checked") trong mã HTML, điều này sẽ đảm bảo rằng một nút radio luôn được chọn.

Một cách vani JavaScript

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value;       
    }
}

Chỉ cần cố gắng cải thiện giải pháp của Russ Cam với một số đường chọn CSS được đưa vào bằng JavaScript vanilla.

var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;

Không có nhu cầu thực sự cho jQuery ở đây, querySelectorAll hiện được hỗ trợ rộng rãi.

Chỉnh sửa: đã sửa một lỗi với bộ chọn css, tôi đã bao gồm các trích dẫn, mặc dù bạn có thể bỏ qua chúng, trong một số trường hợp bạn không thể để chúng vào tốt hơn.

Mã HTML

<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >

Mã Javascript:

var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
    if(off_payment_method[i].checked) {
        ischecked_method = true;
        break;
    }
}
if(!ischecked_method)   { //payment method button is not checked
    alert("Please choose Offline Payment Method");
}

Bạn có thể sử dụng tập lệnh đơn giản này. Bạn có thể có nhiều nút radio có cùng tên và các giá trị khác nhau.

var checked_gender = document.querySelector('input[name = "gender"]:checked');

if(checked_gender != null){  //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}

Các kịch bản trong trang này đã giúp tôi đưa ra kịch bản dưới đây, mà tôi nghĩ là đầy đủ và phổ quát hơn. Về cơ bản, nó sẽ xác nhận bất kỳ số nút radio nào trong một biểu mẫu, nghĩa là nó sẽ đảm bảo rằng một tùy chọn radio đã được chọn cho mỗi một trong các nhóm radio khác nhau trong biểu mẫu. ví dụ trong mẫu thử dưới đây:

   <form id="FormID">

    Yes <input type="radio" name="test1" value="Yes">
    No <input type="radio" name="test1" value="No">

    <br><br>

    Yes <input type="radio" name="test2" value="Yes">
    No <input type="radio" name="test2" value="No">

   <input type="submit" onclick="return RadioValidator();">

Tập lệnh RadioValidator sẽ đảm bảo rằng câu trả lời đã được đưa ra cho cả 'test1' và 'test2' trước khi gửi. Bạn có thể có nhiều nhóm radio trong biểu mẫu và nó sẽ bỏ qua mọi thành phần biểu mẫu khác. Tất cả các câu trả lời radio bị thiếu sẽ hiển thị bên trong một cửa sổ bật lên cảnh báo. Ở đây nó đi, tôi hy vọng nó sẽ giúp mọi người. Bất kỳ sửa lỗi hoặc sửa đổi hữu ích chào mừng :)

<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
    var ShowAlert = '';
    var AllFormElements = window.document.getElementById("FormID").elements;
    for (i = 0; i < AllFormElements.length; i++) 
    {
        if (AllFormElements[i].type == 'radio') 
        {
            var ThisRadio = AllFormElements[i].name;
            var ThisChecked = 'No';
            var AllRadioOptions = document.getElementsByName(ThisRadio);
            for (x = 0; x < AllRadioOptions.length; x++)
            {
                 if (AllRadioOptions[x].checked && ThisChecked == 'No')
                 {
                     ThisChecked = 'Yes';
                     break;
                 } 
            }   
            var AlreadySearched = ShowAlert.indexOf(ThisRadio);
            if (ThisChecked == 'No' && AlreadySearched == -1)
            {
            ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
            }     
        }
    }
    if (ShowAlert != '')
    {
    alert(ShowAlert);
    return false;
    }
    else
    {
    return true;
    }
}
</SCRIPT>

Lưu ý hành vi này với jQuery khi nhận các giá trị đầu vào radio:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Vì vậy, $('input[name="myRadio"]').val()không trả về giá trị đã kiểm tra của đầu vào radio, như bạn mong đợi - nó sẽ trả về giá trị của nút radio đầu tiên.

Với mootools ( http://mootools.net/docs/core/Euity/Euity )

html:

<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />

js:

// Check if second radio is selected (by id)
if ($('radiowithval2').get("checked"))

// Check if third radio is selected (by name and value)
if ($$('input[name=radiosname][value=3]:checked').length == 1)


// Check if something in radio group is choosen
if ($$('input[name=radiosname]:checked').length > 0)


// Set second button selected (by id)
$("radiowithval2").set("checked", true)

đây là chức năng tiện ích tôi đã tạo để giải quyết vấn đề này

    //define radio buttons, each with a common 'name' and distinct 'id'. 
    //       eg- <input type="radio" name="storageGroup" id="localStorage">
    //           <input type="radio" name="storageGroup" id="sessionStorage">
    //param-sGroupName: 'name' of the group. eg- "storageGroup"
    //return: 'id' of the checked radioButton. eg- "localStorage"
    //return: can be 'undefined'- be sure to check for that
    function checkedRadioBtn(sGroupName)
    {   
        var group = document.getElementsByName(sGroupName);

        for ( var i = 0; i < group.length; i++) {
            if (group.item(i).checked) {
                return group.item(i).id;
            } else if (group[0].type !== 'radio') {
                //if you find any in the group not a radio button return null
                return null;
            }
        }
    }

Điều này sẽ hợp lệ cho các nút radio chia sẻ cùng tên, không cần JQuery.

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];

Nếu chúng ta đang nói về các hộp kiểm và chúng tôi muốn một danh sách với các hộp kiểm được chọn chia sẻ tên:

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });

if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)

chỉ là một sửa đổi nhỏ cho Mark Biek;

MÃ HTML

<form name="frm1" action="" method="post">
  <input type="radio" name="gender" id="gender_Male" value="Male" />
  <input type="radio" name="gender" id="gender_Female" value="Female" / >
  <input type="button" value="test"  onclick="check1();"/>
</form>

và mã Javascript để kiểm tra xem nút radio có được chọn không

<script type="text/javascript">
    function check1() {            
        var radio_check_val = "";
        for (i = 0; i < document.getElementsByName('gender').length; i++) {
            if (document.getElementsByName('gender')[i].checked) {
                alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
                radio_check_val = document.getElementsByName('gender')[i].value;        
            }        
        }
        if (radio_check_val === "")
        {
            alert("please select radio button");
        }        
    }
</script>

Có một cách rất tinh vi để bạn có thể xác thực xem có bất kỳ nút radio nào được kiểm tra bằng ECMA6 và phương thức hay không .some().

Html:

<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />

Và javascript:

let htmlNodes = document.getElementsByName('status');

let radioButtonsArray = Array.from(htmlNodes);

let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);

isAnyRadioButtonCheckedsẽ là truenếu một số nút radio được chọn và falsenếu cả hai nút này không được chọn.

Trả lại tất cả các yếu tố được kiểm tra trong nút radio

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);

http://www.somacon.com/p143.php/

function getCheckedValue(radioObj) {
    if(!radioObj)
        return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) {
            return radioObj[i].value;
        }
    }
    return "";
}

Với JQuery, một cách khác để kiểm tra trạng thái hiện tại của các nút radio là lấy thuộc tính 'được kiểm tra'.

Ví dụ:

<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />

Trong trường hợp này, bạn có thể kiểm tra các nút bằng cách sử dụng:

if ($("#gender_male").attr("checked") == true) {
...
}

Mã này sẽ cảnh báo nút radio đã chọn khi biểu mẫu được gửi. Nó đã sử dụng jQuery để lấy giá trị đã chọn.

$("form").submit(function(e) {
  e.preventDefault();
  $this = $(this);

  var value = $this.find('input:radio[name=COLOR]:checked').val();
  alert(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="COLOR" id="Rojo" type="radio" value="red">
  <input name="COLOR" id="Azul" type="radio" value="blue">
  <input name="COLOR" id="Amarillo" type="radio" value="yellow">
  <br>
  <input type="submit" value="Submit">
</form>

Tôi đã sử dụng toán tử trải rộng và một số để kiểm tra ít nhất một phần tử trong mảng vượt qua bài kiểm tra.

Tôi chia sẻ cho ai quan tâm.

var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);

<input type="radio" name="gender" checked value="Male" />
<input type="radio" name="gender"  value="Female" / >

Đây là giải pháp được mở rộng để không tiếp tục gửi và gửi cảnh báo nếu các nút radio không được kiểm tra. Tất nhiên điều này có nghĩa là bạn phải bỏ chọn chúng để bắt đầu!

if(document.getElementById('radio1').checked) {
} else if(document.getElementById('radio2').checked) {
} else {
  alert ("You must select a button");
  return false;
}

Chỉ cần nhớ đặt id ('radio1', 'radio2' hoặc bất cứ thứ gì bạn gọi nó) ở dạng cho mỗi nút radio hoặc tập lệnh sẽ không hoạt động.

Một ví dụ:

if (!checkRadioArray(document.ExamEntry.level)) { 
    msg+="What is your level of entry? \n"; 
    document.getElementById('entry').style.color="red"; 
    result = false; 
} 

if(msg==""){ 
    return result;  
} 
else{ 
    alert(msg) 
    return result;
} 

function Radio() { 
    var level = radio.value; 
    alert("Your level is: " + level + " \nIf this is not the level your taking then please choose another.") 
} 

function checkRadioArray(radioButtons) { 
    for(var r=0;r < radioButtons.length; r++) { 
        if (radioButtons[r].checked) { 
            return true; 
        } 
    } 
    return false; 
} 

Hình thức

<form name="teenageMutant">
  <input type="radio" name="ninjaTurtles"/>
</form>

Kịch bản

if(!document.teenageMutant.ninjaTurtles.checked){
  alert('get down');
}

Câu đố: http://jsfiddle.net/PNpUS/

Tôi chỉ muốn đảm bảo một cái gì đó được chọn (sử dụng jQuery):

// html
<input name="gender" type="radio" value="M" /> Male <input name="gender" type="radio" value="F" /> Female

// gender (required)
var gender_check = $('input:radio[name=gender]:checked').val();
if ( !gender_check ) {
    alert("Please select your gender.");
    return false;
}

Nếu bạn muốn vanilla JavaScript, đừng muốn làm lộn xộn đánh dấu của bạn bằng cách thêm ID trên mỗi nút radio và chỉ quan tâm đến các trình duyệt hiện đại , cách tiếp cận chức năng sau đây đối với tôi hơn một chút so với vòng lặp for:

<form id="myForm">
<label>Who will be left?
  <label><input type="radio" name="output" value="knight" />Kurgan</label>
  <label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>

<script>
function getSelectedRadioValue (formElement, radioName) {
    return ([].slice.call(formElement[radioName]).filter(function (radio) {
        return radio.checked;
    }).pop() || {}).value;
}

var formEl = document.getElementById('myForm');
alert(
   getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>

Nếu không được chọn, nó sẽ trả về undefined(mặc dù bạn có thể thay đổi dòng trên để trả về một thứ khác, ví dụ: để được falsetrả về, bạn có thể thay đổi dòng có liên quan ở trên thành }).pop() || {value:false}).value;:).

Ngoài ra còn có cách tiếp cận polyfill hướng tới vì giao diện RadioNodeList sẽ giúp bạn dễ dàng sử dụng một thuộc valuetính trong danh sách các thành phần vô tuyến con mẫu (được tìm thấy trong đoạn mã trên formElement[radioName]), nhưng có vấn đề riêng: Cách polyfill RadioNodeList ?

Điều này cũng hoạt động, tránh gọi một id phần tử nhưng gọi nó bằng cách sử dụng như một phần tử mảng.

Đoạn mã sau dựa trên thực tế là một mảng, được đặt tên là nhóm radiobuttons, được tạo bởi các phần tử radiobuttons theo cùng thứ tự như chúng được khai báo trong tài liệu html:

if(!document.yourformname.yourradioname[0].checked 
   && !document.yourformname.yourradioname[1].checked){
    alert('is this working for all?');
    return false;
}

HTML:

<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>

<p id="result"></p>

JAVAScript:

var options = document.getElementsByName("calculation");

for (var i = 0; i < options.length; i++) {
    if (options[i].checked) {
        // do whatever you want with the checked radio
        var calc = options[i].value;
        }
    }
    if(typeof calc == "undefined"){
        document.getElementById("result").innerHTML = " select the operation you want to perform";
        return false;
}

Cung cấp cho các nút radio, cùng tên nhưng ID khác nhau.

var verified1 = $('#SOME_ELEMENT1').val();
var verified2 = $('#SOME_ELEMENT2').val();
var final_answer = null;
if( $('#SOME_ELEMENT1').attr('checked') == 'checked' ){
  //condition
  final_answer = verified1;
}
else
{
  if($('#SOME_ELEMENT2').attr('checked') == 'checked'){
    //condition
    final_answer = verified2;
   }
   else
   {
     return false;
   }
}