Question

这是我的单选按钮的代码：

<div class="col-md-6 alert alert-success" dir="rtl" >
    Select an Option <br>
    <label class="radio">
        <input type="radio" name="sp" id="sp1" value="1" checked>
            <span style="margin-right: 30px;">Option-1</span>
    </label><br>
    <label class="radio-inline">
      <input type="radio" name="sp" id="sp2" value="2">
            <span style="margin-right: 30px;">Option-2</span>
    </label>
</div>

并且我想在以下脚本音频src中获得button的值，因此通过单击单选按钮，我可以在媒体文件夹之间切换：

function PlayVerse(surat,n) {
     var aud=document.getElementById("myaudio");
     aud.src= "http://data.quranacademy.com/AUDIOS/Media-/01_"
               +TxtFormat(surat,"000")
               +"_"
               +TxtFormat(n,"000")
               +".mp3";
}

var x = document.getElementsByTagName("IMG");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style = 'display: inline-block; '
                 +'border: 1px solid #ddd; '
                 +'border-radius: 4px; padding: 5px;';
}

Answer 1

尝试使用普通的javascript

function PlayVerse(){
var radio = document.getElementsByName('sp');
var check;
for (var i = 0, length = radio.length; i < length; i++)
{
 if (radio[i].checked)
 {
  console.log(radio[i].value);
   check = radio[i].value;
  break;
 }
}
}

<div class="col-md-6 alert alert-success" dir="rtl" >Select an Option</br>
<label class="radio">
  <input type="radio" name="sp" id="sp1" value="1" checked><span style="margin-right: 30px;">Option-1
</span></label></br>
<label class="radio-inline">
  <input type="radio" name="sp" id="sp2" value="2"><span style="margin-right: 30px;">Pption-2
</span></label>
</div>
<button type = "button" onclick="PlayVerse();">Get Radio button value  </button>

Answer 2

在这里，您可以获取选中的radio button的值。通过getElementsByName获取所有NodeList，并遍历每个变量并检查是否已选中。

function getVal(elementName) {
	var radios = document.getElementsByName(elementName), rValue = null;
	for (var i = 0; i < radios.length; i++) {
		if (radios[i].checked) {
			rValue = radios[i].value;
			break;
		}
	}
  console.log(rValue);
}

<div class="col-md-6 alert alert-success" dir="rtl" >
    Select an Option <br>
    <label class="radio">
        <input type="radio" onchange="getVal('sp')" name="sp" id="sp1" value="1" checked>
            <span style="margin-right: 30px;">Option-1</span>
    </label><br>
    <label class="radio-inline">
      <input type="radio" onchange="getVal('sp')" name="sp" id="sp2" value="2">
            <span style="margin-right: 30px;">Option-2</span>
    </label>
</div>

Answer 3

如果您想通过点击radio button来做某事，它将为您提供帮助

window.onload=function(){

    (function (){
      var radios = document.getElementsByName('sp');
      radios.forEach(function(radio){
        radio.onclick = function(){
              alert(this.value);
              //do something
          }
      })
    })();

}

Answer 4

红色淡黄色

<p id="demo"></p>

<script>
    function myFunction() {
        //var x = document.getElementById("myRadioRed").value;
        //document.getElementById("demo").innerHTML = x;
        var radios = document.getElementsByName('colors');

        for (var i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
                // do whatever you want with the checked radio
                document.getElementById("demo").innerHTML = radios[i].value;

                // only one radio can be logically checked, don't check the rest
                break;
            }
        }
    }
</script>

Answer 5

<input type="radio" name="colors" value="red" id="myRadioRed" onchange="myFunction()" checked="checked" />Red color
    <input type="radio" name="colors" value="yellow" id="myRadioYellow" onchange="myFunction()" />Yelow color

<p id="demo"></p>

Answer 6

function PlayVerse() {
   var selected_radio_button_value = getRadioButtonValue("sp");
   alert(selected_radio_button_value);
   }
   
 function getRadioButtonValue(elementName) {
    var array1 = document.getElementsByName(elementName), rValue = null;
    array1.forEach(function(element) {
      if( element.checked ) {
        rValue = element.value;
        return true;
      }
    });
    return rValue;
}

<div class="col-md-6 alert alert-success" dir="rtl" >Select an Option</br>
<label class="radio">
  <input type="radio" name="sp" id="sp1" value="1" checked><span style="margin-right: 30px;">Option-1
</span></label></br>
<label class="radio-inline">
  <input type="radio" name="sp" id="sp2" value="2"><span style="margin-right: 30px;">Pption-2
</span></label>
</div>
<button type = "button" onclick="PlayVerse();">Get Radio button value  </button>

在这里，您可以使用javascript获取单选按钮的值，我创建了一个函数，该函数将为您提供所选单选按钮的值，您可以将该值存储在变量中，并在需要的位置访问它，您可以通过两种方式进行操作

将单选按钮值转换为javascript

6 个答案: