10

请查看以下内容：

$('#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 的类更改为绿色并选择另一个将重置所有但仅将绿色添加到新选择的！

是否也可以更改其第一个先前 TD 的类别，其中包含“某些文本 3”等？

谢谢。

4

7 回答 7

13

尝试这样的事情：

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

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

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

$('.green').removeClass('green');
于 2009-06-08T13:40:50.603 回答
13

您不应该在单选按钮和复选框上使用 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');
    }
});
于 2009-06-08T13:54:51.153 回答
4

试试这个：

if($(this).is(':checked')) {
    $(this).parent().siblings('td.green').removeClass('green');
    $(this).parent().addClass('green');
}
于 2009-06-08T13:50:11.287 回答
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');
    }
});
于 2010-03-23T03:50:12.300 回答
1

我的建议是：

$('#myRadio').change(function() {           
    _parent = $(this).parent();
    if($(this).is(':checked'))  {
       _parent.addClass('green');
    } else {                              
       _parent.removeClass('green');
    }
});
于 2012-02-21T12:48:43.453 回答
0

这是对我有用的解决方案：

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。我不确定是否有特定的顺序在浏览器中执行“单击”和“更改”。
  • 使用 :radio 代替 jQuery 推荐的 [type="radio"]
  • 为单选按钮的默认值设置父级上的类。

希望这可以帮助！

于 2011-11-15T21:59:56.547 回答
0

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

忘记表格（谷歌知道很多原因）并使用如下包装器

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

于 2012-11-27T07:28:29.890 回答