Question

我以前尝试过其他帖子上的示例，但是没有一个起作用？

这是代码。

function sumvalnotset(modelbtn) {
    var model;
    for (var i = 0; i < modelbtn.length; i++) {
        if(modelbtn[i].checked) {
            model = modelbtn[i].value;
            break;
        }
    }
    var p = document.getElementById("sumvalnotset");
    p.innerHTML = "the value is " + model
}

<body>
  <div>
    <p>Select:</p>
    <input class="modelbtn" name="genoptradio1" type="radio" value="22,8" onclick="sumvalnotset('genoptradio1')">example1
    <input class="modelbtn" name="genoptradio1" type="radio" value="29,6" onclick="sumvalnotset('genoptradio1')">example2
    <input class="modelbtn" name="genoptradio1" type="radio" value="34,2" onclick="sumvalnotset('genoptradio1')">example3
    <input class="modelbtn" name="genoptradio1" type="radio" value="31,2" onclick="sumvalnotset('genoptradio1')">example4
  </div>
  <p id="sumvalnotset">the value is 0</p>
</body>

Answer 1

您可以通过传入this来简化它。从事件中您可以获取defaultValue或仅获取value

function sumvalnotset(e) {
    var model = e.defaultValue;
    var p = document.getElementById("sumvalnotset");
    p.innerHTML = "the value is " + model
}

<body>
  <div>
    <p>Select:</p>
    <input class="modelbtn" name="genoptradio1" type="radio" value="22,8" onclick="sumvalnotset(this)">example1
    <input class="modelbtn" name="genoptradio1" type="radio" value="29,6" onclick="sumvalnotset(this)">example2
    <input class="modelbtn" name="genoptradio1" type="radio" value="34,2" onclick="sumvalnotset(this)">example3
    <input class="modelbtn" name="genoptradio1" type="radio" value="31,2" onclick="sumvalnotset(this)">example4
  </div>
  <p id="sumvalnotset">the value is 0</p>
</body>

Answer 2

通过将按钮的值输入为this来进行尝试，然后在函数中按如下所示访问值：

    function sumvalnotset(modelbtn){
       // here you access the actual value of the clicked radio button
       const value = modelbtn.value;     
       alert(value); 
    }

<body>
        <div>
          <p>Select:</p>
              <input class="modelbtn" name="genoptradio1" type="radio" value="22,8" onclick="sumvalnotset(this);">example1
              <input class="modelbtn" name="genoptradio1" type="radio" value="29,6" onclick="sumvalnotset(this);">example2
              <input class="modelbtn" name="genoptradio1" type="radio" value="34,2" onclick="sumvalnotset(this);">example3
              <input class="modelbtn" name="genoptradio1" type="radio" value="31,2" onclick="sumvalnotset(this);">example4
        </div>
        <p id="sumvalnotset">the value is 0</p>
    </body>

Answer 3

您可以使用以下代码。

function sumvalnotset(modelbtn) {
  var p = document.getElementById("sumvalnotset");
  p.innerHTML = "the value is " + modelbtn.value
}

<body>
  <div>
    <p>Select:</p>
    <input class="modelbtn" name="genoptradio1" type="radio" value="22,8" onclick="sumvalnotset(this);">example1
    <input class="modelbtn" name="genoptradio1" type="radio" value="29,6" onclick="sumvalnotset(this);">example2
    <input class="modelbtn" name="genoptradio1" type="radio" value="34,2" onclick="sumvalnotset(this);">example3
    <input class="modelbtn" name="genoptradio1" type="radio" value="31,2" onclick="sumvalnotset(this);">example4
  </div>
  <p id="sumvalnotset">the value is 0</p>
</body>

Answer 4

不是将onclick添加到每个<input>并遍历所有输入。我建议您使用:checked来确定要检查哪个单选。

document.querySelectorAll('.modelbtn').forEach(input => {
	input.addEventListener('click',sumvalnotset)
})
function sumvalnotset(){
	//it will get the radio input with class '.modelbtn' which is checked
	let model = document.querySelector('.modelbtn:checked');
	//checks if any radio is checked
	if(model){
		document.getElementById('sumvalnotset').innerHTML = "the value is " + model.value
	}
}

<div>
  <p>Select:</p>
  <input class="modelbtn" name="genoptradio1" type="radio" value="22,8">example1
  <input class="modelbtn" name="genoptradio1" type="radio" value="29,6">example2
  <input class="modelbtn" name="genoptradio1" type="radio" value="34,2">example3
  <input class="modelbtn" name="genoptradio1" type="radio" value="31,2">example4
</div>
<p id="sumvalnotset">the value is 0</p>

如何获取返回值的选定单选按钮的值

4 个答案: