如何通过使用jQuery引用单选按钮的类名称来从单击的单选按钮中获取价值?

时间:2018-12-02 11:28:41

标签: jquery

当我单击特定的单选按钮时,我有3个同级的单选按钮,那么该单选按钮的值应通过引用脚本下的单选按钮的类名来提醒我。 / p>

if($("input[type='radio'].radioBtn").prop('checked')) {
    var btntype = $("input[type='radio'].radioBtn:checked").val();
    alert(btntype);
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <input type="radio" class="radioBtn" name="numbers" value="1" />1<br/>
  <input type="radio" class="radioBtn" name="numbers" value="2" />2<br/>
  <input type="radio" class="radioBtn" name="numbers" value="3" />3<br/>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

每次有人单击输入值时,都应使用click事件来触发函数。您可以在jQuery API Doc中阅读有关事件的更多信息。

$(document).ready(function() {
  $("#inputs").on('click', 'input[type="radio"]', function() {
    alert($(this).val()); // this points to the clicked element
  });
});
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="inputs">
    <input type="radio" class="radioBtn" name="numbers" value="1" />1<br/>
    <input type="radio" class="radioBtn" name="numbers" value="2" />2<br/>
    <input type="radio" class="radioBtn" name="numbers" value="3" />3<br/>
  </div>
</body>
</html>

答案 1 :(得分:0)

代码使用元素“ input [type ='radio']。radioBtn”侦听主体中的所有更改。单击单选按钮时,会发生一个事件,即您需要的目标值。这是当前单选按钮的值 尝试以下代码:

$("body").on("change", "input[type='radio'].radioBtn", function (event) {
    alert(event.target.value);
});
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    
  <input type="radio" class="radioBtn" name="numbers" value="1" />1<br/>
  <input type="radio" class="radioBtn" name="numbers" value="2" />2<br/>
  <input type="radio" class="radioBtn" name="numbers" value="3" />3<br/>

</body>
</html>