0

这是基本代码

<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 单击 <label> 并检查兄弟 <radio> 是否已选中 =“checked”，然后将“selected”类添加到父 <li>

2 单击 <label> 并检查兄弟 <radio> 是否未选中，然后将 checked="checked" 添加到兄弟 <radio> 并将“selected”类添加到父 <li> 并删除所有其他“选中<ul> 中的 " 和 "选中"

请问你能帮帮我吗！

4

3 回答 3

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");
 });
});
于 2010-10-22T04:09:06.720 回答
1

由于您已经在使用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/

于 2010-10-22T04:13:08.667 回答
0

我敢肯定这不是最优雅的方式，而是更改了您的标记（将类“a”和“b”添加到您的 li - 与无线电元素的 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

祝你好运！

于 2010-10-22T04:04:25.190 回答