jQuery 检查单选按钮是否被选中答案

【问题标题】：jQuery Check if a Radio Button is Selected or notjQuery 检查单选按钮是否被选中
【发布时间】：2014-04-23 09:14:36
【问题描述】：

我有一个如下表格，并带有单选按钮来选择表格行。

<div class="table-responsive">
            <table class="table">
              <tbody>
                <tr>
                  <td>
                    <label class="radio">
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
                    </label>
                  </td>
                  <td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/02.jpg"></td>
                </tr>
                <tr class="selected-row">
                  <td>
                    <label class="radio">
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio" checked>
                    </label>
                  </td>
                  <td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/01.jpg"></td>
                </tr>
                <tr>
                  <td>
                    <label class="radio">
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
                    </label>
                  </td>
                  <td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/03.jpg"></td>
                </tr>
                <tr>
                  <td>
                    <label class="radio">
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
                    </label>
                  </td>
                  <td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/04.jpg"></td>
                </tr>
                <tr>
                  <td>
                    <label class="radio">
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
                    </label>
                  </td>
                  <td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/05.jpg"></td>
                </tr>
              </tbody>
            </table>
          </div>

现在，当我选择一个单选按钮时，我想突出显示该行并从其他行中删除突出显示。

// Table: Add class row selected
$('.table tbody :radio').on('check uncheck toggle', function (e) {
    var $this = $(this),
        check = $this.prop('checked'),
        toggle = e.type == 'toggle',
        checkboxes = $('.table tbody :radio'),
        checkAll = checkboxes.length == checkboxes.filter(':checked').length

        $this.closest('tr')[check ? 'addClass' : 'removeClass']('selected-row');
    if (toggle) $this.closest('.table').find('.toggle-all :radio').checkbox(checkAll ? 'check' : 'uncheck');
});

错误：

它突出显示选定的行，但不会从中删除突出显示之前选择的行。

【问题讨论】：

标签： jquery html radio-button checked

【解决方案1】：

试试这个

$('#element').click(function() {
  if($('#radio_button').is(':checked')) { alert("it's checked"); }
  });

【讨论】：

我已经可以添加 css 类了。如果我更改选择，它不会删除先前选择的行

【解决方案2】：

试试这个：

// Table: Add class row selected
$('.table tbody :radio').change(function() {
    $('.table tbody :radio:checked').closest('tr').addClass('selected-row');
    $('.table tbody :radio:not(:checked)').closest('tr').removeClass('selected-row');
});

【讨论】：

我认为你的答案更好，只是为了摆脱所有“parent()”链接“.closest()”会很好

【解决方案3】：

使用它也可以工作。

$('.table tbody :radio').on('click',function(){
    $(this).closest("tr").addClass("selected-row");
    $(".table tbody :radio").not(this).closest("tr").removeClass("selected-row")
});

Fiddle

【讨论】：

【解决方案4】：

把我的两美分扔在桌子上。

您可以将一个类添加到最近的 tr（在您的示例中将是单选按钮父级），然后从最近的 tr 兄弟中删除类。

$('.table').on('change', ':radio', function() {
    $(this).closest('tr').addClass('selected-row').siblings('tr').removeClass('selected-row'); 
});

JSFiddle

【讨论】：