Làm thế nào để có được giá trị của nút radio đã chọn?

Tôi muốn nhận giá trị được chọn từ một nhóm các nút radio.

Đây là HTML của tôi:

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
</div>

Đây là .js của tôi:

var rates = document.getElementById('rates').value;
var rate_value;
if(rates =='Fixed Rate'){
    rate_value = document.getElementById('r1').value;

}else if(rates =='Variable Rate'){
    rate_value = document.getElementById('r2').value;

}else if(rates =='Multi Rate'){
    rate_value = document.getElementById('r3').value;
}  

document.getElementById('results').innerHTML = rate_value;

Tôi tiếp tục không xác định.

var rates = document.getElementById('rates').value;

Phần tử tỷ lệ là một div, vì vậy nó sẽ không có giá trị. Đây có lẽ là nơiundefined đến từ.

Các checkedbất động sản sẽ cho bạn biết liệu phần tử được chọn:

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

Điều này hoạt động trong IE9 trở lên và tất cả các trình duyệt khác.

document.querySelector('input[name="rate"]:checked').value;

Bạn có thể nhận được giá trị bằng cách sử dụng checkedtài sản.

var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
    }
}

Đối với bạn những người sống ở rìa:

Hiện tại có một thứ gọi là RadioNodeList và truy cập thuộc tính giá trị của nó sẽ trả về giá trị của đầu vào hiện đang được kiểm tra. Điều này sẽ loại bỏ sự cần thiết của lần đầu tiên lọc ra đầu vào 'được kiểm tra' như chúng ta thấy trong nhiều câu trả lời được đăng.

Mẫu ví dụ

<form id="test">
<label><input type="radio" name="test" value="A"> A</label>
<label><input type="radio" name="test" value="B" checked> B</label>
<label><input type="radio" name="test" value="C"> C</label>
</form>

Để lấy lại giá trị đã kiểm tra, bạn có thể làm một cái gì đó như thế này:

var form = document.getElementById("test");
alert(form.elements["test"].value);

JSFiddle để chứng minh điều đó: http://jsfiddle.net/vjop5xtq/

Xin lưu ý rằng điều này đã được triển khai trong Firefox 33 (Tất cả các trình duyệt chính khác dường như đều hỗ trợ nó). Các trình duyệt cũ hơn sẽ yêu cầu một polfyill RadioNodeListđể điều này hoạt động đúng

Một công việc cho tôi được đưa ra dưới đây từ api.jquery.com.

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

Biến được chọnOption sẽ chứa giá trị của nút radio đã chọn (nghĩa là) o1 hoặc o2

Một tùy chọn khác (dường như cũ hơn) là sử dụng định dạng: "document.nameOfTheForm.nameOfTheInput.value;" ví dụ: document.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

Bạn có thể tham chiếu đến phần tử theo tên của nó trong một biểu mẫu. HTML gốc của bạn không chứa thành phần biểu mẫu.

Fiddle tại đây (hoạt động trong Chrome và Firefox): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

Sử dụng document.querySelector ('input [type = radio]: đã kiểm tra'). Value; để nhận giá trị của hộp kiểm đã chọn, bạn có thể sử dụng các thuộc tính khác để nhận giá trị như tên = giới tính, v.v. vui lòng xem qua đoạn trích dưới đây chắc chắn nó sẽ hữu ích cho bạn,

Giải pháp

document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    result.innerHTML = 'You Gender: '+gender;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Male" checked/>Male
    <input type="radio" name="gender" value="Female" />Female
    <input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>

Cảm ơn bạn

MÃ HTML:

<input type="radio" name="rdoName" value="YES"/> <input type="radio" name="rdoName" value="NO"/>

MÃ SỐ YÊU CẦU:

var value= $("input:radio[name=rdoName]:checked").val();

$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>

Bạn sẽ nhận được

value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"

Trong Javascript, chúng tôi có thể nhận được các giá trị bằng cách sử dụng "" của Id getElementById()trong đoạn mã trên mà bạn đã đăng có chứa tên không phải Id để bạn sửa đổi như thế này

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

sử dụng Phòngvalue này theo mã của bạn

Một năm đã trôi qua kể từ khi câu hỏi được hỏi, nhưng tôi nghĩ rằng một sự cải thiện đáng kể của các câu trả lời là có thể. Tôi thấy đây là tập lệnh dễ nhất và linh hoạt nhất, bởi vì nó kiểm tra xem một nút đã được kiểm tra chưa, và nếu vậy, giá trị của nó là gì:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Check radio checked and its value</title>
</head>
<body>

    <form name="theFormName">
        <input type="radio" name="theRadioGroupName" value="10">
        <input type="radio" name="theRadioGroupName" value="20">
        <input type="radio" name="theRadioGroupName" value="30">
        <input type="radio" name="theRadioGroupName" value="40">
        <input type="button" value="Check" onclick="getRadioValue('theRadioGroupName')">
    </form>

    <script>
        function getRadioValue(groupName) {
            var radios = theFormName.elements[groupName];
            window.rdValue; // declares the global variable 'rdValue'
            for (var i=0; i<radios.length; i++) {
                var someRadio = radios[i];
                if (someRadio.checked) {
                    rdValue = someRadio.value;
                    break;
                }
                else rdValue = 'noRadioChecked';
            }
            if (rdValue == '10') {
                alert('10'); // or: console.log('10')
            }
            else if (rdValue == 'noRadioChecked') {
                alert('no radio checked');
            }
        }
    </script>
</body>
</html>

Bạn cũng có thể gọi hàm trong một hàm khác, như thế này:

function doSomething() {
    getRadioValue('theRadioGroupName');
    if (rdValue == '10') {
        // do something
    }
    else if (rdValue == 'noRadioChecked') {
        // do something else
    }  
} 

Giả sử phần tử biểu mẫu của bạn được tham chiếu theo myFormbiến bên dưới và các nút radio của bạn chia sẻ tên "my-radio-button-name-name", sau đây là JavaScript thuần và tuân thủ tiêu chuẩn (mặc dù tôi chưa kiểm tra nó có ở mọi nơi không ):

myForm.elements.namedItem("my-radio-button-group-name").value

Trên đây sẽ mang lại giá trị của một kiểm tra (hoặc chọn, vì nó còn được gọi là) yếu tố nút radio, nếu có, hoặcnull ngược lại. Điểm mấu chốt của giải pháp là namedItemchức năng hoạt động với các nút radio cụ thể.

Xem HTMLFormEuity.elements , HTMLFormControlsCollection.namedItem và đặc biệt là RadioNodeList.value , như namedItem thường lệ trả về một RadioNodeListđối tượng.

Tôi sử dụng MDN vì nó cho phép một người theo dõi các tiêu chuẩn tuân thủ, ít nhất là ở mức độ lớn và vì nó dễ hiểu hơn nhiều ấn phẩm WhatWG và W3C.

gọi trực tiếp nút radio nhiều lần sẽ cho bạn giá trị của nút FIRST chứ không phải nút KIỂM TRA. thay vì lặp các nút radio thông qua để xem cái nào được kiểm tra, tôi thích gọi một onclickhàm javascript đặt một biến mà sau này có thể được lấy ra theo ý muốn.

<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >

mà gọi:

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false; 
}

lợi thế bổ sung là tôi có thể xử lý dữ liệu và / hoặc phản ứng với việc kiểm tra nút (trong trường hợp này là bật nút SUBMIT).

Một cải tiến cho các chức năng được đề xuất trước đó:

function getRadioValue(groupName) {
    var _result;
    try {
        var o_radio_group = document.getElementsByName(groupName);
        for (var a = 0; a < o_radio_group.length; a++) {
            if (o_radio_group[a].checked) {
                _result = o_radio_group[a].value;
                break;
            }
        }
    } catch (e) { }
    return _result;
}

Tôi coi vấn đề này với javascript thuần là tìm nút đã kiểm tra, tìm giá trị của nó và bật ra khỏi mảng.

var Anodes = document.getElementsByName('A'),
    AValue = Array.from(Anodes)
       .filter(node => node.checked)
       .map(node => node.value)
       .pop();
console.log(AValue);

Lưu ý rằng tôi đang sử dụng các chức năng mũi tên . Xem fiddle này cho một ví dụ làm việc.

Nếu bạn đang sử dụng jQuery:

$('input[name="rate"]:checked').val();

Bạn có thể sử dụng .find()để chọn thành phần được kiểm tra:

var radio = Array.from(document.querySelectorAll('#rate input'))

var value = radio.length && radio.find(r => r.checked).value

<form id="rates">
  <input type="radio" name="rate" value="Fixed Rate"> Fixed
  <input type="radio" name="rate" value="Variable Rate"> Variable
  <input type="radio" name="rate" value="Multi Rate" checked> Multi
</form>

sau đó...

var rate_value = rates.rate.value;

kiểm tra giá trị theo ID:

var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;

Tôi đã sử dụng hàm jQuery.click để có được đầu ra mong muốn:

$('input[name=rate]').click(function(){
  console.log('Hey you clicked this: ' + this.value);

  if(this.value == 'Fixed Rate'){
    rate_value = $('#r1').value;
  } else if(this.value =='Variable Rate'){
   rate_value = $('#r2').value;
  } else if(this.value =='Multi Rate'){
   rate_value = $('#r3').value;
  }  

  $('#results').innerHTML = rate_value;
});

Hy vọng nó giúp.

Nếu các nút ở dạng
var myform = new FormData(getformbywhatever); myform.get("rate");
QuerySelector ở trên là một giải pháp tốt hơn. Tuy nhiên, phương pháp này rất dễ hiểu, đặc biệt nếu bạn không có đầu mối về CSS. Thêm vào đó, các trường đầu vào hoàn toàn có khả năng ở dạng.
Không kiểm tra, có những giải pháp tương tự khác, xin lỗi vì sự lặp lại

var rates = document.getElementById('rates').value;

không thể lấy giá trị của nút radio như thế thay vào đó sử dụng

rate_value = document.getElementById('r1').value;

Nếu bạn đang sử dụng JQuery, vui lòng sử dụng đoạn trích dưới đây cho nhóm các nút radio.

var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();

Đơn giản chỉ cần sử dụng: document.querySelector('input[rate][checked]').value

Bạn cũng có thể lặp qua các nút bằng vòng lặp forEach trên các phần tử

    var elements = document.getElementsByName('radioButton');
    var checkedButton;
    console.log(elements);
    elements.forEach(e => {
        if (e.checked) {
            //if radio button is checked, set sort style
            checkedButton = e.value;
        }
    });

https://codepen.io/anon/pen/YQxbZJ

HTML

<div id="rates">
<input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="x2" name="rate" value="Variable Rate" 
checked="checked"> Variable Rate
<input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate
</div>

<button id="rdio"> Check Radio </button>
<div id="check">

</div>

Mã thông báo

var x ,y;
var x = document.getElementById("check");
function boom()
{
if (document.getElementById("x1").checked)
  y = document.getElementById("x1").value;

else if(document.getElementById("x2").checked)
  y = document.getElementById("x2").value;

else if (document.getElementById("x3").checked)
  y = document.getElementById("x3").value;
else
  y = "kuch nhi;"
x.innerHTML = y;
}

var z = document.getElementById('rdio');
z.addEventListener("click", boom);`

Trong php nó là
trang html rất dễ dàng

Male<input type="radio" name="radio" value="male"><br/>
Female<input type="radio" name="radio" value="female"><br/>
Others<input type="radio" name="radio" value="other"><br/>
<input type="submit" value="submit">

Lấy giá trị từ biểu mẫu để php

$radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}