jQuery 单选按钮 onchange 切换父元素的类？

Question

请看下面的内容：

$('#myRadio').change(function() {           

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    } else {                              
        $(this).parent().removeClass('green');
    }
});

标记看起来有点像以下内容

<table>
  <tr>
    <td>Some text 1 </td>
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
    <td>Some text 2 </td>
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
    <td>Some text 3 </td>
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
  </tr>
</table>

当我切换单选框时，上面的JavaScript代码会将“green”应用于TD标记，这是可以的。但如果我更改选择到另一个单选框，则它会将绿色添加到另一个单选框中，但不会从先前选择的单选框中删除绿色。

如何使其工作，以便选择单选框会更改其父级TD的类为绿色，并选择另一个单选框将重置所有单选框并仅向新选择的单选框添加绿色！

能否也将其第一个包含“some text 3”等的先前TD的类更改为绿色？

谢谢。

- TigerTiger

Answer 1

试试像这样：

if($(this).is(':checked'))  {
    $(this).parent().parent().parent().find('.green').removeClass('green');
    $(this).parent().addClass('green');
}

这将找到当前单选按钮组的表格元素，查找任何带有绿色类的元素，并移除该类。

或者，如果页面上只有一个单选按钮组，则更简单的方法是：

$('.green').removeClass('green');

- Chris Van Opstal

---

@chris pebble -> 感谢您的回复。很酷它按照要求工作。 - TigerTiger

Answer 2

不应该在单选框和复选框上使用change()事件。它在各种浏览器中表现不稳定（在所有版本的IE中都会引起问题）。

相反，应该使用click()事件（不必担心无障碍性问题，因为如果您使用键盘激活/选择单选按钮，则也将触发click事件）

正如其他人指出的那样，重置绿色也很容易：

所以只需更改您的代码为

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    }
});

编辑：根据评论的要求，同时更改之前的td：

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().prev().andSelf().addClass('green');
    }
});

甚至更好的是，把父行的所有td元素都变成绿色:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parents("tr").find("td").addClass('green');
    }
});

- Philippe Leybaert

---

@active，感谢您的回复。但它只是添加了类，而没有删除类。 - TigerTiger

奇怪。我把这段代码和HTML放到jsbin.com上，它居然可以运行。你可以在这里检查一下：http://jsbin.com/unefa - Philippe Leybaert

是的，它在 jsbin 上按照我的要求工作。但不知何故，在我的本地上它只是不能移除 .green 类！很奇怪。有什么想法可以同时更改前一个 TD 的背景吗？谢谢 Activa。 - TigerTiger

@activa..太棒了..抱歉我还没有足够的声望来投票支持你。谢谢。 - TigerTiger

@wbdvlpr- 我理解你想要显示新选择的带有应用颜色的内容，但是你想从以前选择的内容中获取什么信息？ - TStamper

Answer 3

我刚刚写了一个解决方案，不关心单选按钮嵌套的深度，只使用单选按钮的名称属性。这意味着这段代码将在任何地方都能正常工作，我认为不需要修改 - 我不得不编写它，因为我的情况很奇怪，其中一个单选按钮与具有相同名称的同伴嵌套方式不同。

$('input[type="radio"]').change( function() {
    // grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    // iterate through each  
    // if checked, set its parent label's class to "selected"
    // if not checked, remove the "selected" class from the parent label
    // my HTML markup for each button is  <label><input type="radio" /> Label Text</label>
    // so that this works anywhere even without a unique ID applied to the button and label
    for (var i=0; i < this_radio_set.length;i++) {
        if ( $(this_radio_set[i]).is(':checked') ) $(this_radio_set[i]).parents('label').addClass('selected');
        else $(this_radio_set[i]).parents('label').removeClass('selected');
    }
});

- mungojerie

Answer 4

试试这个：

if($(this).is(':checked')) {
    $(this).parent().siblings('td.green').removeClass('green');
    $(this).parent().addClass('green');
}

- eu-ge-ne

---

如果您想成为一名超级1337的jQuery忍者黑客，可以使用.end()将上面的代码压缩为一个jQuery语句。以下是一个快速示例：$(this).parent().siblings('td.green').removeClass('green').end().addClass('green') - Xavi

Answer 5

我的建议是：

$('#myRadio').change(function() {           
    _parent = $(this).parent();
    if($(this).is(':checked'))  {
       _parent.addClass('green');
    } else {                              
       _parent.removeClass('green');
    }
});

- Majid Shahmohammadi

Answer 6

这是对我非常有效的解决方案：

var $boxes=$('input:radio');
var $parents = $boxes.parent();
$boxes.click(function(){
    $parents.filter('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});
$boxes.filter(':checked').parent().addClass('selected');

特点：

• 更快。仅一次选择复选框列表。
• 不依赖于:checked。我不确定在各种浏览器中“clicked”和“changed”将以某种顺序执行。
• 使用 :radio 而不是 [type="radio"]，这是 jQuery 推荐的。
• 为单选按钮的默认值在父元素上设置类。

希望这有所帮助！

- romaninsh

Answer 7

我认为这是最好的、更灵活的方法：

忘掉表格（谷歌知道很多原因），使用以下包装器。

<div id="radio_wrapper">
    <span class="radio">
        <label for="myRadio1" class="myRadio">Some text 1 </label>
        <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio2" class="myRadio">Some text 2 </label>
        <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio3" class="myRadio">Some text 3 </label>
        <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" />
    </span>
</div

像这样使用CSS格式

span.radio {
    background-color: #cccccc;
}
span.currentGreen {
    background-color: #ccffcc;
}

使用这个脚本，你可以完全按照你的意愿进行操作。

$('.myRadio').change(function() {           
    $('.currentGreen').removeClass('currentGreen'); // remove from all
    if ($(this).is(':checked')) {
        $(this).parent().addClass('currentGreen'); // add to current
    }
});

我不喜欢使用filter()和find()，因为它们在这种情况下使用了不必要的资源。

- eapo