Question

我正在制作带有单选按钮的选项列表，但这些选项位于表格内，属于TD。

按下单选按钮时，我尝试用一种颜色突出显示表格行，但是它会突出显示所有表格行而不是我按下的那一行。

我按下后，例如：选项1.我只想强调选项1。

看看这个例子： look jsFiddle

Answer 1

您可以单独选择所有input，绑定change事件侦听器，并将checked类添加到实际选定的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>

UIView

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

完成的

只需使用：选中选择器

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

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

6 个答案: