jquery - jqueryを使用してチェックすると、ラジオボタンの親にcssクラスを追加します

Question

チェックされている場合、ラジオボタンの div.from に css クラスを追加しようとしています。チェックが入っていない場合は削除してください。

そして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に適用したいことです

ありがとうございました。ナレシュ・カミレディ

Answer 1

フィドルはこちら

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

Answer 2

最後に私は私の答えを得ました....

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

私の質問に貴重なお時間を割いていただき、ありがとうございます....

Answer 3

また、入力の少し奇妙なセレクターもあります。

$(this) はクリックされた要素です。クリックされた入力の名前と一致する名前の入力ラジオを検索する必要はありません。$(this) と $(this).parent() を使用して、クリックされた親を選択します。

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

Answer 4

これはうまくいくはずです：

$(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 5

編集：

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