Question

这是基本代码

<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点击＆lt; label＆gt;并检查兄弟姐妹＆lt; radio＆gt;检查=“已选中”，然后将“已选择”类添加到父级＆lt; li＆gt;

2点击＆lt; label＆gt;并检查兄弟姐妹＆lt; radio＆gt;未检查然后将checked =“checked”添加到兄弟＆lt; radio＆gt;并将“selected”类添加到父级＆lt; li＆gt;同时删除＆lt; ul＆gt;

中的所有其他“已选中”和“已选中”

你能帮帮我吗？

Answer 1

单击标签应在浏览器中自动检查单选按钮。所以，你只需要在标签/输入上添加一个click事件，它将在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");
 });
});

Answer 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/

Answer 3

我确信这不是最优雅的方式，但改变了你的标记（在你的li中添加了'a'和'b'类 - 基本上与无线电元素的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

祝你好运！

使用jQuery检查单选按钮状态

3 个答案: