使用 jQuery 的单选按钮检查状态答案

【问题标题】：Radio button checked status with jQuery使用 jQuery 的单选按钮检查状态
【发布时间】：2011-04-28 23:17:10
【问题描述】：

这是基本代码

<ul>
 <li>
  <input type="radio" name="r" value="a" id="a" checked="checked" />
  <label for="a">A</label>
 </li>
 <li>
  <input type="radio" name="r" value="b" id="b" />
  <label for="b">B</label>
 </li>
</ul>

所以我需要让它工作：

1 点击并检查兄弟是否为checked="checked"，然后将"selected"类添加到父类

2 单击并检查兄弟是否未选中，然后将 checked="checked" 添加到兄弟并将 "selected" 类添加到父

也删除所有

中的其他“选中”和“选中”

你能帮帮我吗！

【问题讨论】：

标签： jquery radio checked

【解决方案1】：

点击标签应该会自动检查浏览器中的单选按钮。因此，您只需要在标签/输入中添加一个点击事件，该事件将在 li 上设置类。

这样的东西应该可以工作：
HTML（我刚刚添加了id="mylist"）

<ul id="mylist">
 <li>
  <input type="radio" name="r" value="a" id="a" checked="checked" />
  <label for="a">A</label>
 </li>
 <li>
  <input type="radio" name="r" value="b" id="b" />
  <label for="b">B</label>
 </li>
</ul>

JavaScript

$(function() {
 $("#mylist input, #mylist label").click(function() {
  $("#mylist li").removeClass("selected");
  $(this).parent().addClass("selected");
 });
});

【讨论】：

【解决方案2】：

由于您已经在使用label 和for 属性，因此实际上应该没有必要将事件附加到label 元素，除非您需要与IE6 抗衡，让您的生活变得困难。

$(':radio[name="r"]').change(function(){
    $(this).parent('li').addClass('selected').siblings().removeClass('selected');
}).filter(':checked').change();

文档：change()

请参阅：http://www.jsfiddle.net/yijiang/mzPk9/

【讨论】：

【解决方案3】：

我确信这不是最优雅的方式，而是更改了您的标记（将类“a”和“b”添加到您的 li - 基本上与无线电 elem 的 id 的值相同。包含）我们开始：

$('label').click(function(){
    // if the radio is already checked
    if ($('#'+$(this).attr('for')).attr('checked') == 'checked') {
        $('ul li').removeClass('selected');  // remove previous selected items
        $('.'+$(this).attr('for')).addClass('selected'); // add new selected item
    } else {
        // radio not checked
        $('#'+$(this).attr('for')).attr('checked','checked'); // check radio (altough this should be automatic, without js
        $('ul li').removeClass('selected'); // clear previous selected items
        $('.'+$(this).attr('for')).addClass('selected'); // add new selected item
    }
});

为了速度，我建议在 ul 中添加一个 id，比如“list”，然后更改代码

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

到

$('#list label').click(function(){

另外，来自：

$('ul li').removeClass('selected');  // remove previous selected items

到

$('#list li').removeClass('selected');  // remove previous selected items

祝你好运！

【讨论】：