Question

如果选中，我正在尝试将css类添加到单选按钮的div.from中。如果未选中则删除。

和html：

<div style="width:49.5%;height:auto;float:left;" class="from">


<label>
<div class="fromm" id="order">
    <div class="frairimg"></div>
    <div class="frfromdetails"></div>
    <div class="frarrow"></div>
    <div class="frfromdetails"></div>
    <div class="frrefund"></div>
    <div class="radio"><input type="radio" name="from" id="something" class="getvalue"></div>
    <div class="frfnumber"></div>
    <div class="roundfare"></div>
</div>
</label>

<label>
<div class="fromm" id="order1">
    <div class="frairimg"></div>
    <div class="frfromdetails"></div>
    <div class="frarrow"></div>
    <div class="frfromdetails"></div>
    <div class="frrefund"></div>
    <div class="radio"><input type="radio" name="from" id="something1" class="getvalue"></div>
    <div class="frfnumber"></div>
    <div class="roundfare"></div>
</div>
</label>

  <label>
<div class="fromm" id="order2">
    <div class="frairimg"></div>
    <div class="frfromdetails"></div>
    <div class="frarrow"></div>
    <div class="frfromdetails"></div>
    <div class="frrefund"></div>
    <div class="radio"><input type="radio" name="from" id="something2" class="getvalue"></div>
    <div class="frfnumber"></div>
    <div class="roundfare"></div>
</div>
</label>                                  

</div>

CSS

<style>
.checked11 { background: red; }
</style>

以下是我在jquery中提出的内容：

<script>
$(document).ready(function() {
  $('input:radio').click(function() {
    $('input:radio[name='+$(this).attr('name')+']').parent().removeClass('checked11');
        $(this).parent().addClass('checked11');

    });
});

</script>

这里我的问题是该类只申请单选按钮，但希望它申请div.from

三江源。 Naresh Kamireddy

Answer 1

如果我理解正确，这个问题有两个要求。

选择单选按钮后

CSS类checked11应添加到所选单选按钮的父级。
CSS类checked11应该从现在不再选择的单选按钮的任何父级删除。

如果是这种情况，那么以下内容应该有效：

var $radioButtons = $('input[type="radio"]');
$radioButtons.click(function() {
    $radioButtons.each(function() {
        $(this).parent().toggleClass('checked11', this.checked);
    });
});

jsFiddle demonstration

Answer 2

这是 FIDDLE

  $('input:radio').click(function () {
      $('input:radio').parent().removeClass('checked11');
      $(this).parent(this).addClass('checked11');
  });

Answer 3

最后我得到了答案......

$(document).ready(function() {
    var $radioButtons = $('input[type="radio"]');
$radioButtons.click(function() {
    $radioButtons.each(function() {
        $(this).closest('.fromm').toggleClass('checked11', this.checked);
    });
});
});

感谢大家花了宝贵的时间来解答我的问题......

Answer 4

修改

$(this).closest('.fromm').addClass('checked11');

Answer 5

这应该有效：

$(document).ready(function(){
   $('input:radio').change(function(){
      var $self = $(this);
      if ($self.prop('checked')) {
         $self.parent().addClass('checked11');
      } else {
         $self.parent().removeClass('checked11');
      }
   });
});

[编辑] http://jsfiddle.net/jtpU6/1/

$(document).ready(function(){
   $('input:radio').change(function(){
      $('div:has(input:radio)').removeClass('checked11');
      var $self = $(this);
      if ($self.prop('checked')) {
         $self.parent().addClass('checked11');
      }
   });
});

Answer 6

你也有一个奇怪的输入选择器。

$（this）是点击的元素，您不需要搜索名称与点击的输入名称匹配的输入无线电，只需使用$（this） - 和$（this）.parent（）来选择被点击的父级：

$(document).ready(function() {
  $('input:radio').click(function() {
    $(this).parent().removeClass('checked11').addClass('checked11');
    });
});

使用jquery检查时，将css类添加到单选按钮的父级

6 个答案:

jsFiddle demonstration