jQuery radio 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 代码将“绿色”应用于 TD 标签，这很好。但是，如果我将选择更改为另一个，它会将绿色添加到另一个，但不会从先前选择的收音机中删除绿色。

如何使它工作，以便选择一个单选选项将其父 TD 的类更改为绿色，然后选择另一个将重置所有内容，但仅将绿色添加到新选择的选项中！

是否也可以更改其包含“some text 3”等的第一个先前 TD 的类？？

谢谢。

Answer 1

试试这样的：

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

这将找到您当前单选按钮分组的表格元素，找到任何具有绿色类的元素，然后删除该类。

或者，如果页面上只有一个单选按钮组，那么这样做会更简单：

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

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');
    }
});

Answer 3

试试这个：

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

Answer 4

我刚刚写了一个解决方案，它不关心单选按钮的嵌套程度，它只是使用单选按钮的名称属性。这意味着此代码无需修改即可在任何地方工作，我认为 - 我必须编写它，因为我遇到了一种奇怪的情况，即一个单选按钮的嵌套与其同名的同类群组不同。

$('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');
    }
});

Answer 5

我的建议是：

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

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 代替 jQuery 推荐的 [type="radio"]
• 为单选按钮的默认值设置父类。

希望这会有所帮助！

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()，因为在这种情况下它们使用了不必要的资源。