单击单选按钮时更改div /表格行的背景颜色

Question

我正在用单选按钮列出选项列表，但是这些选项位于表内，属于TD。

在按下单选按钮时，我尝试用一​​种颜色突出显示表格行，但是随后突出显示了所有表格行，而不是我按下的行。

例如，一旦按下，选项1。我只想突出显示选项1。

请看下面的例子： look 的jsfiddle

Answer 1

您可以选择所有的input ，绑定change事件侦听器，然后将checked类添加到实际选择的input的父级中，而不必分别引用每个input 。

 $('.crimeOption input').change(function() { $('.crimeOption td').removeClass('checked'); if ($(this).is(':checked')) { $(this).parent().addClass('checked'); } }); 

 .checked { background: linear-gradient(to right, rgb(76, 140, 128), rgba(55, 119, 120, 1)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Head</th> </tr> </thead> <tbody class="radio-list"> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt1" /><label>Option 1.</td> </tr> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt2" /><label>Option 2.</td> </tr> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt3" />Option 3.</td> </tr> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt4" />Option 4.</td> </tr> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt5" />Option 5.</td> </tr> </tbody> </table> 

Answer 2

如何使用相对选择器？ 另外，您不应该有多个具有相同ID的元素，因此我也对此进行了修复。

 //jQuery implementation $('[name=valgt]').click(function() { $(".checked").removeClass("checked"); if($(this).is(':checked')) { $(this).closest('.crimeOption').addClass('checked'); } }); 

 .checked { background: linear-gradient(to right, rgb(76, 140, 128), rgba(55, 119, 120, 1)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <table> <thead> <tr> <th>Head </th> </tr> </thead> <tbody class="radio-list"> <tr class="crimeOption"> <td> <input type="radio" name="valgt" /> <label>Option 1. </td> </tr> <tr class="crimeOption"> <td> <input type="radio" name="valgt" /> <label>Option 2. </td> </tr> <tr class="crimeOption"> <td> <input type="radio" name="valgt" />Option 3. </td> </tr> <tr class="crimeOption"> <td> <input type="radio" name="valgt" />Option 4. </td> </tr> <tr class="crimeOption"> <td> <input type="radio" name="valgt" />Option 5. </td> </tr> </tbody> </table> 

Answer 3

您正在使用它们都共享的类选择器来选择td。 您需要更改：

        $('.crimeOption').addClass('checked');

至

        $(this).closest('td').addClass('checked');

Answer 4

更新的jsfiddle代码的jQuery函数这里（ https://jsfiddle.net/b4w0cnbf/7/ ）

$('input[type="radio"]').click(function() {
    $('.crimeOption').removeClass('checked');
    if($(this).is(':checked')) {
        $(this).closest('.crimeOption').addClass('checked');
    }
});

根据评论请求更新jquery代码，更新了jsfiddle链接：

$('input[type="radio"]').click(function(e) {
    $(this).closest('.crimeOption').trigger('click');
});

$('.crimeOption').click(function() {
    $('.crimeOption').removeClass('checked');
    if($(this).find('input[type="radio"]').is(':checked')) {
        $(this).find('input[type="radio"]').prop("checked", false);
        //$(this).addClass('checked');
    } else {
        $(this).find('input[type="radio"]').prop("checked", true);
        $(this).addClass('checked');
    }

});

Answer 5

这个怎么样

 $("input[type='radio']").change(function(){ var value = $( 'input[name=opt]:checked' ).val(); $("input[type='radio']").parent('td').css("background","initial"); $(this).parent('td').css("background","red"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Head</th> </tr> </thead> <tbody class="radio-list"> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt1" /><label>Option 1.</td> </tr> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt2" /><label>Option 2.</td> </tr> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt3" />Option 3.</td> </tr> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt4" />Option 4.</td> </tr> <tr class="crimeOption"> <td><input type="radio" name="valgt" id="valgt5" />Option 5.</td> </tr> </tbody> </table> 

$("input[type='radio']").change(function(){
  var value = $( 'input[name=opt]:checked' ).val();
  $("input[type='radio']").parent('td').css("background","initial");
    $(this).parent('td').css("background","red");
});

Answer 6

这是简单地由CSS完成的

只需使用：checked选择器

input[type="radio"]:checked + label{
  background:red;
}