4

如果选中，我正在尝试将一个 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

谢谢你。纳雷什·卡米雷迪

4

6 回答 6

8

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

选择单选按钮后：

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

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

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

jsFiddle 演示

于 2013-05-28T10:18:18.913 回答
3

这是小提琴

  $('input:radio').click(function () {
      $('input:radio').parent().removeClass('checked11');
      $(this).parent(this).addClass('checked11');
  });
于 2013-05-28T10:13:44.067 回答
1

终于得到了我的答案......

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

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

于 2013-05-28T13:15:54.503 回答
0

编辑：

 $(this).closest('.fromm').addClass('checked11');
于 2013-05-28T10:05:30.237 回答
0

这应该有效：

$(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');
      }
   });
});
于 2013-05-28T10:06:19.257 回答
0

您还有一个奇怪的输入选择器。

$(this) 是被点击的元素，您不需要搜索名称与点击的输入名称匹配的输入单选，只需使用 $(this) - 和 $(this).parent() 来选择点击的父项：

$(document).ready(function() {
  $('input:radio').click(function() {
    $(this).parent().removeClass('checked11').addClass('checked11');
    });
});
于 2013-05-28T10:07:54.767 回答