jQuery thêm/xóa lớp css trên radio đã chọn

Question

Tôi đã đọc một vài giải pháp ở đây, nhưng vấn đề của tôi khác nhau ở nơi những người đó sẽ không hoạt động. Về cơ bản, nếu nút radio được chọn, hãy thêm một lớp css vào div cha. Nếu đài không được chọn, hãy loại bỏ lớp css. Âm thanh đơn giản?

Tôi có nhiều nhóm nút radio, vì vậy nói cách khác, sẽ có nhiều nút radio được chọn cùng một lúc. Mỗi nhóm nút radio cũng nằm trên các phần khác nhau của trang được phân cách bằng các html khác.

Dưới đây là những gì tôi đã đưa ra:

$(document).ready(function() { 
    $('input').click(function() { 
     if ($('input:not(:checked)')) { 
      $('div').removeClass('style1'); 
     } 
     if ($('input').is(':checked')) { 
      $(this).parent().addClass('style1'); 
     } 


    }); 
}); 

Tôi nghĩ rằng tôi đang trên con đường đúng với đầu vào: không (: kiểm tra), nhưng trên dòng tiếp theo nó loại bỏ style1 từ tất cả các phần tử div thay vì kiểm tra xem các nút radio radio con khác có được chọn hay không.

Tôi đoán điều tôi hỏi là làm cách nào để viết kịch bản khi nhấn nút radio, thêm lớp css vào phụ huynh và sau đó tìm tất cả thẻ div trên trang có con đầu vào. Nếu đầu vào con divs không được chọn, hãy loại bỏ lớp css. Vì vậy, nếu một div có một yếu tố đầu vào con và nó được kiểm tra, không loại bỏ các lớp css từ div đầu vào.

Tôi hy vọng điều đó có ý nghĩa.

Answer 1

Tại sao không sử dụng như sau: http://jsfiddle.net/Q2bzT/

$(document).ready(function() { 
    $('input').click(function() { 
     $('input:not(:checked)').parent().removeClass("style1"); 
     $('input:checked').parent().addClass("style1"); 
    });  
});​ 

Answer 2

Giả sử các nút radio sử dụng thuộc tính name để nhóm chính xác chúng, khi một thay đổi, bạn có thể tìm thấy radio có cùng tên và xóa lớp, sau đó thêm lớp đó vào lớp đã được kích hoạt.

Hãy thử nó ra:http://jsfiddle.net/U2AAQ/

$(document).ready(function() { 
    $(':radio').change(function() { 
     $(':radio[name=' + this.name + ']').parent().removeClass('style1'); 
     $(this).parent().addClass('style1'); 
    }); 
});​ 

Answer 3

Tôi đã có một vấn đề tương tự nhưng tôi cần phải nhắm vào nút radio của label thay vì của một phụ huynh div phần tử. Tôi cũng cần đảm bảo các yếu tố liên quan khác label không có lớp.

Đây là những gì tôi đã đưa ra dựa trên câu trả lời @ user113716 của:

HTML

đang MVC loại bỏ do đó chỉ HTML trong ví dụ này

<ol class="list-group"> 
    <li class="list-group-item"> 
     <div class="input-group"> 
      <label for="choice_ChoiceId" class="form-control">ChoiceDescription</label> 
      <span class="input-group-addon"> 
       <input type="radio" id="choice_ChoiceId" value="choiceValue" name="choiceName" required /> 
      </span> 
     </div> 
    </li> 
</ol> 

jQuery

$(':radio').click(function() { 
    var _groupName = $(this).attr('name'), 
     _radioId = $(this).attr('id'), 
     _radioGroup = $(':radio[name="' + _groupName + '"]'); 

    //remove class from all labels for this group of radio buttons 
    _radioGroup.each(function(){ 
     $('label[for*="' + $(this).attr('id') + '"]').removeClass('style1'); 
    }); 

    //add the class to the selected radio button 
    $('label[for*="' + _radioId + '"]').addClass('style1'); 
}); 

Answer 4

Javascript

'use strict'; 
var o = 'label.input-check, label.input-radio'; 
$(o).find('input').change(function() { 
    $(o).find('input').filter('input[name="' + (this).name + '"]').each(function() { 
     $(this).parent(o).toggleClass('checked', (this).checked); 
    }); 
}).trigger('change'); 

Demo:http://jsfiddle.net/3uwp9c2n/

Chỉ cần tối ưu hóa nếu bạn cần.