发表新帖
发表新帖

How to get value of selected radio button?

前端 未结
关注
28 2262
温柔的废话
温柔的废话 2020-11-22 03:51

I want to get the selected value from a group of radio buttons.

Here\'s my HTML:


  

        

                      

              相关标签:
28条回答
  • 暖寄归人
    2020-11-22 04:34

    You can use .find() to select checked element:

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

var value = radio.length && radio.find(r => r.checked).value
    0 讨论(0)
  • 囚心锁ツ
    2020-11-22 04:35

    If you are using the JQuery, please use the bellow snippet for group of radio buttons.

    var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();
    0 讨论(0)
  • 清歌不尽
    2020-11-22 04:35

    In php it's very easy
    html page

    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">

    Take value from form to php

    $radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}
    0 讨论(0)
  • 一向
    2020-11-22 04:36

    For you people living on the edge:

    There is now something called a RadioNodeList and accessing it's value property will return the value of the currently checked input. This will remove the necessity of first filtering out the 'checked' input as we see in many of the posted answers.

    Example Form

    <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>

    To retrieve the checked value, you could do something like this:

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

    The JSFiddle to prove it: http://jsfiddle.net/vjop5xtq/

    Please note this was implemented in Firefox 33 (All other major browser seems to support it). Older browsers will require a polfyill for RadioNodeList for this to properly function

    0 讨论(0)
  • 终归单人心
    2020-11-22 04:38

    I used the jQuery.click function to get the desired output:

    $('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;
});

    Hope it helps.

    0 讨论(0)
  • 情话喂你
    2020-11-22 04:39

    A year or so has passed since the question was asked, but I thought a substantial improvement of the answers was possible. I find this the easiest and most versatile script, because it checks whether a button has been checked, and if so, what its value is: 

    <!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>

    You can also call the function within another function, like this: 

    function doSomething() {
    getRadioValue('theRadioGroupName');
    if (rdValue == '10') {
        // do something
    }
    else if (rdValue == 'noRadioChecked') {
        // do something else
    }  
}
    0 讨论(0)
 看不清?
提交回复
热议问题