jQuery radio onchange chuyển đổi lớp của phần tử cha?

Question

hãy có một cái nhìn vào những điều sau đây:

$('#myRadio').change(function() {   

    if($(this).is(':checked')) { 
     $(this).parent().addClass('green'); 
    } else {        
     $(this).parent().removeClass('green'); 
    } 
}); 

Markup lookslike hơi như sau

<table> 
    <tr> 
    <td>Some text 1 </td> 
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td> 
    <td>Some text 2 </td> 
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td> 
    <td>Some text 3 </td> 
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td> 
    </tr> 
</table> 

Khi tôi chuyển sang đài phát thanh, trên mã javascript áp dụng 'xanh' để TD thẻ, đó là tốt. Nhưng nếu tôi thay đổi vùng chọn sang màu khác, nó sẽ thêm màu xanh lá cây vào vùng khác nhưng không loại bỏ màu xanh lục khỏi đài phát thanh đã chọn trước đó.

Làm cách nào để làm cho nó hoạt động để chọn tùy chọn radio thay đổi lớp TD của bố mẹ thành màu xanh lục và chọn một lớp khác sẽ đặt lại tất cả nhưng thêm màu xanh lá cây vào chỉ mới được chọn!

Nó cũng có thể được thực hiện để thay đổi lớp TD đầu tiên trước đó của nó có chứa "một số văn bản 3" vv ??

Cảm ơn.

Answer 1

Hãy thử một cái gì đó như thế này:

if($(this).is(':checked')) { 
    $(this).parent().parent().parent().find('.green').removeClass('green'); 
    $(this).parent().addClass('green'); 
} 

này sẽ tìm ra nguyên tố bảng của nút radio nhóm hiện tại của bạn, tìm thấy bất kỳ yếu tố với lớp màu xanh lá cây, và loại bỏ các lớp.

Ngoài ra, nếu bạn chỉ có nhóm nút một đài phát thanh trên trang web, nó sẽ đơn giản chỉ cần làm:

$('.green').removeClass('green'); 

Answer 2

Hãy thử điều này:

if($(this).is(':checked')) { 
    $(this).parent().siblings('td.green').removeClass('green'); 
    $(this).parent().addClass('green'); 
} 

Answer 3

Bạn không nên sử dụng sự thay đổi() sự kiện trên các nút và hộp kiểm radio. Nó hoạt động một chút tinh ranh và mâu thuẫn giữa các trình duyệt (nó gây ra vấn đề trong mọi phiên bản của IE)

Sử dụng sự kiện click() để thay thế (đừng lo lắng về khả năng truy cập, vì sự kiện click cũng sẽ được kích hoạt nếu bạn kích hoạt/chọn một nút radio với bàn phím)

Và như những người khác ở đây chỉ ra, đặt lại màu xanh lá cây rất dễ dàng cũng như:

vì vậy, chỉ cần thay đổi mã của bạn để

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parent().addClass('green'); 
    } 
}); 

EDIT: theo yêu cầu trong bình luận, cũng thay đổi td trước:

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parent().prev().andSelf().addClass('green'); 
    } 
}); 

hoặc thậm chí tốt hơn, biến tất cả các yếu tố td của hàng mẹ xanh:

$('#myRadio').click(function() {   
    $(this).parents("tr").find(".green").removeClass("green"); 

    if($(this).is(':checked')) { 
     $(this).parents("tr").find("td").addClass('green'); 
    } 
}); 

Answer 4

tôi chỉ viết một giải pháp mà không quan tâm cách sâu sắc lồng các nút radio là, nó chỉ sử dụng thuộc tính tên của các nút radio. Điều này có nghĩa là mã này sẽ hoạt động mà không sửa đổi bất cứ đâu, tôi nghĩ - tôi phải viết nó vì tôi có một tình huống lạ khi một nút radio được lồng khác với nhóm thuần tập có cùng tên.

$('input[type="radio"]').change(function() { 
    // grab all the radio buttons with the same name as the one just changed 
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]'); 

    // iterate through each 
    // if checked, set its parent label's class to "selected" 
    // if not checked, remove the "selected" class from the parent label 
    // my HTML markup for each button is <label><input type="radio" /> Label Text</label> 
    // so that this works anywhere even without a unique ID applied to the button and label 
    for (var i=0; i < this_radio_set.length;i++) { 
     if ($(this_radio_set[i]).is(':checked')) $(this_radio_set[i]).parents('label').addClass('selected'); 
     else $(this_radio_set[i]).parents('label').removeClass('selected'); 
    } 
}); 

Answer 5

Dưới đây là giải pháp mà làm việc tuyệt vời cho tôi:

var $boxes=$('input:radio'); 
var $parents = $boxes.parent(); 
$boxes.click(function(){ 
    $parents.filter('.selected').removeClass('selected'); 
    $(this).parent().addClass('selected'); 
}); 
$boxes.filter(':checked').parent().addClass('selected'); 

Các tính năng:

• nhanh hơn. Chỉ chọn danh sách hộp kiểm một lần.
• Không dựa vào: đã chọn. Tôi không chắc chắn nếu có một thứ tự nhất định trong đó "nhấp" và "thay đổi" sẽ được thực hiện trên các trình duyệt.
• sử dụng: radio thay vì [type = "radio"] là jQuery được đề xuất
• đặt lớp trên cấp độ gốc cho giá trị mặc định của nút radio.

Hy vọng điều này sẽ hữu ích!

Answer 6

đề nghị của tôi là:

$('#myRadio').change(function() {   
    _parent = $(this).parent(); 
    if($(this).is(':checked')) { 
     _parent.addClass('green'); 
    } else {        
     _parent.removeClass('green'); 
    } 
}); 

Answer 7

tôi nghĩ rằng đây là cách tốt nhất và linh hoạt hơn để làm điều này:

quên các bảng (google biết nhiều lý do cho điều đó) và sử dụng giấy gói như dưới đây

<div id="radio_wrapper"> 
    <span class="radio"> 
     <label for="myRadio1" class="myRadio">Some text 1 </label> 
     <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" /> 
    </span> 
    <span class="radio"> 
     <label for="myRadio2" class="myRadio">Some text 2 </label> 
     <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" /> 
    </span> 
    <span class="radio"> 
     <label for="myRadio3" class="myRadio">Some text 3 </label> 
     <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" /> 
    </span> 
</div 

định dạng với CSS như

này

span.radio { 
    background-color: #cccccc; 
} 
span.currentGreen { 
    background-color: #ccffcc; 
} 

và sử dụng kịch bản này bạn có thể thực hiện chính xác giống như bạn muốn

$('.myRadio').change(function() {   
    $('.currentGreen').removeClass('currentGreen'); // remove from all 
    if ($(this).is(':checked')) { 
     $(this).parent().addClass('currentGreen'); // add to current 
    } 
}); 

tôi không muốn sử dụng bộ lọc() và tìm() bởi vì họ sử dụng tài nguyên không cần thiết trong trường hợp này.