Question

我有这段代码

<td width="143"><b>Monday</b></td>
<td width="68" class="open select_open">
  <span class="jqTransformRadioWrapper">
    <a href="#" class="jqTransformRadio" rel="radio_m"></a>
    <input type="radio" name="radio_m" checked="checked" class="jqTransformHidden">
  </span>
</td>

单选按钮没有任何价值。但是，我应该能够在选中时更改<a>标记的class属性值和单选按钮上方的<td>标记。

有人可以帮帮我吗？

Answer 1

您可以浏览元素结构。 prev()函数返回单选按钮前的前一个元素，closest('td')返回最接近TD的TD元素。

$('input[name=radio_m]').change(function() {
   var $this = $(this);
   $this.prev().addClass('...'); // adding class to link above
   $this.prev().removeClass('...'); // removing class to link above

   $this.closest('td').addClass('...'); // adding class to table cell
   $this.closest('td').removeClass('...'); // removing class to table cell
});

Answer 2

$("input[name='radio_m']").change(function(){
    if ($("input[name='radio_m']:checked").val() == '1') {
        $(".jqTransformRadio").attr('href', '[Your Value]');
        $(".select_open").attr('width','[Your Width');
    }
}

这应该这样做。

Answer 3

$('input[name="radio_m"]').change(function(){
    var $this = $(this), $td = $this.closest('td');
    if(this.checked){
      $td.find('a.jqTransformRadio').addClass('addClass')
      $td.removeClass('removeClass');
    }
    else{
      $td.find('a.jqTransformRadio').removeClass('addClass')
      $td.addClass('removeClass');
    }
});

你可以尝试这样的事情。 $this.closest('td');会为您提供所需的<td>，然后您可以找到<a>标记。使用addClass和removeClass（甚至toggleClass）更改元素上的类。

选中单选按钮时更改类属性

3 个答案: