单选按钮的jquery事件监听器答案

【问题标题】：jquery event listener for radio buttons单选按钮的jquery事件监听器
【发布时间】：2014-08-04 09:23:51
【问题描述】：

我正在尝试为一组设置创建一个 jquery 事件侦听器。这是单选按钮的示例：

<div class="settings">
    <input type="radio" id="a1" name="a" value="1" style="display: none;" />
        <label for="a1">a1</label>
    <input type="radio" id="a2" name="a" value="2" style="display: none;" />
        <label for="a2">a1</label>
    <input type="radio" id="a3" name="a" value="3" style="display: none;" />
        <label for="a3">a1</label>
</div>
<div class="settings">
    <input type="radio" id="b1" name="b" value="1" style="display: none;" />
        <label for="b1">a1</label>
    <input type="radio" id="b2" name="b" value="2" style="display: none;" />
        <label for="b2">a1</label>
    <input type="radio" id="b3" name="b" value="3" style="display: none;" />
        <label for="b3">a1</label>
</div>

当单击单选按钮时，我需要一个 jquery 侦听器，但我很困惑，因为未单击单选按钮，它们被隐藏了。它是被点击的标签。我还需要知道点击了哪个按钮。这是我所得到的：

$('.settings label').click(function() {
    alert("Something was clicked"); // test - not working
    // need something to determine what was clicked
    updateSettings('a', 'value'); // what was checked, and the value, stored to database via separate function
});

但这不起作用，我不知道如何判断点击了什么（a1、a2..b2 等）

【问题讨论】：

标签： jquery

【解决方案1】：

改成这样：

$('.settings label').click(function() {
  console.log('Value of Radion: '.concat($(this).prev().val(), 'Name of radio: ', $(this).prev().attr('name')));
});

input[type=radio] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="settings">
  <input type="radio" id="a1" name="a1" value="1" />
  <label for="a1">a1</label>
  <input type="radio" id="a2" name="a2" value="2" />
  <label for="a2">a1</label>
  <input type="radio" id="a3" name="a3" value="3" />
  <label for="a3">a1</label>
</div>
<div class="settings">
  <input type="radio" id="b1" name="b1" value="1" />
  <label for="b1">a1</label>
  <input type="radio" id="b2" name="b2" value="2" />
  <label for="b2">a1</label>
  <input type="radio" id="b3" name="b3" value="3" />
  <label for="b3">a1</label>
</div>

【讨论】：

【解决方案2】：

Demo Fiddle

使用查询.attr()

试试这个，

$(function(){
    $('.settings label').click(function() {

          updateSettings($(this).attr('for'), $('#'+$(this).attr('for')).val());
    });
});

【讨论】：

【解决方案3】：

您需要将其放入准备好的文档中：

$(function(){
    $('.settings label').click(function() {
         var cliked = this.getAttribute('for'); // get you the for attr for clicked label
         alert(cliked + ' clicked.');
          updateSettings(cliked, $(':radio[id="'+ cliked +'"]').val()); 
          // cliked is what is clicked and other param is checked radio value
    });
});

【讨论】：

【解决方案4】：

尝试使用 .change() 事件。

在此处查看更多信息：.change() event @ jQuery.com。

在这里查看它的实际效果：@987654322@

如图how-to-use-radio-on-change-event

【讨论】：

【解决方案5】：

试试：

$('.settings label').click(function () {
    var iName = $('#'+$(this).attr('for')).attr('name');
    var iVal = $('#'+$(this).attr('for')).val()
    // need something to determine what was clicked
    updateSettings(iName,iVal); // what was checked, and the value, stored to database via separate function
});

【讨论】：