Question

请查看以下内容：

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

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

Markup看起来有点跟随

<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

我刚写了一个解决方案，它不关心单选按钮的嵌套程度，它只使用单选按钮的name属性。这意味着这段代码在任何地方都可以正常工作，我想 - 我必须写它，因为我有一个奇怪的情况，其中一个单选按钮的嵌套方式与其同名的同类组件不同。

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

特点：

更快。仅选择一次复选框列表。
不依赖：已检查。我不确定是否存在跨浏览器执行“点击”和“更改”的特定订单。
使用：radio而不是[type =“radio”]，这是jQuery推荐的
在父级上设置class作为单选按钮的默认值。

希望这有帮助！

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

像这样的

格式的

格式

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

jQuery radio onchange toggle父类元素的类？

7 个答案: