Question

我通过jQuery 11.1遇到单选按钮点击事件的问题。如果我点击div，单选按钮状态更改为第一次点击，但我一次又一次地点击它不能正常工作。这是我的代码HTML代码

<section class="selection-box">

<div class="row">
  <div class="col-lg-12">
    <div class="selection-box-title">Brand</div>
    <div class="radioStyle clearfix selected brandSection">
      <input name="brandRadio" id="brandRadio" type="radio">
      <label class="selection-box-label col-lg-12">
        <span class="col-lg-6">Desktop </span>
        <span class="col-lg-6 text-right">From $500 </span>
      </label>
    </div>
    <div class="radioStyle clearfix brandSection">
      <input name="brandRadio" id="brandRadio" type="radio">
      <label class="selection-box-label col-lg-12">
        <span class="col-lg-6">Mac </span>
        <span class="col-lg-6 text-right">From $500 </span>
      </label>
    </div>


  </div>
</div>

这是jQuery代码

<script>
$(".brandSection").click(function () {

  $('input[type="radio"]', this).attr('checked', 'checked');

  if ($('input[type="radio"]', this).attr('checked', 'checked') == true) {
    $('brandSection').removeClass('selected');

  }
  else {
    $('.brandSection').removeClass('selected');
    $(this).addClass('selected');

  }


});

我错过了哪些调整？

Answer 1

您可以尝试：

$(".brandSection").click(function () {
    $(this).find('input[type=radio]').prop('checked', true);

    $('.brandSection').removeClass('selected'); // duplicate lines
    $(this).addClass('selected'); // not understanding for this line
    // why you add class selected when the radio button is NOT clicked?
     
});

.selected {
    border: 1px solid #00f
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="selection-box">

<div class="row">
  <div class="col-lg-12">
    <div class="selection-box-title">Brand</div>
    <div class="radioStyle clearfix selected brandSection">
      <input name="brandRadio" id="brandRadio1" type="radio">
      <label class="selection-box-label col-lg-12">
        <span class="col-lg-6">Desktop </span>
        <span class="col-lg-6 text-right">From $500 </span>
      </label>
    </div>
    <div class="radioStyle clearfix brandSection">
      <input name="brandRadio" id="brandRadio2" type="radio">
      <label class="selection-box-label col-lg-12">
        <span class="col-lg-6">Mac </span>
        <span class="col-lg-6 text-right">From $500 </span>
      </label>
    </div>


  </div>
</div>

Answer 2

您在课程brandSection上输入错字：

if ($('input[type="radio"]', this).attr('checked', 'checked') == true) {
    $('.brandSection').removeClass('selected');

  }

更好地将代码包装在文档就绪语句中

$(function(){
//your code here
})

使用find()

选择相对于当前点击元素的输入

Answer 3

我建议，基于一些小猜测，你想在代码中发生什么：

// binding the anonymous function of the click() method
// as the event-handler for the click event:
$(".brandSection").click(function() {

  // finding the descendant radio input (using
  // plain JavaScript in this case since it's
  // faster/cheaper than calling jQuery:
  var radio = this.querySelector('input[type=radio]');

  // setting the checked property to (Boolean) true:
  radio.checked = true;

  // adding the 'selected' class-name to the clicked
  // .brandSelection element:
  $(this).addClass('selected')
    // selecting the siblings of that element:
    .siblings()
    // and removing the 'selected' class from those elements
    // (to ensure only one element is selected):
    .removeClass('selected');

// filtering the collection of '.brandSection' elements to
// find the one - if any - with the 'selected' class-name:
}).filter('.selected')
// triggering the 'click' event on that element, in order
// that the appropriate radio-input shows up as selected
// on page-load:
.click();

.selected {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="selection-box">
  <div class="row">
    <div class="col-lg-12">
      <div class="selection-box-title">Brand</div>
      <div class="radioStyle clearfix selected brandSection">
        <input name="brandRadio" id="brandRadio" type="radio" />
        <label class="selection-box-label col-lg-12">
          <span class="col-lg-6">Desktop </span>
          <span class="col-lg-6 text-right">From $500 </span>
        </label>
      </div>
      <div class="radioStyle clearfix brandSection">
        <input name="brandRadio" id="brandRadio" type="radio" />
        <label class="selection-box-label col-lg-12">
          <span class="col-lg-6">Mac</span>
          <span class="col-lg-6 text-right">From $500 </span>
        </label>
      </div>


    </div>
  </div>
</section>

JS Fiddle demo

原始代码中的错误是以下行：

$('input[type="radio"]', this).attr('checked', 'checked');

checked属性不会 - 不幸的是 - 更新checked属性。

参考文献：

CSS：
- Attribute selectors。
JavaScript的：
- document.querySelector()。
- HTMLInputElement。
jQuery的：
- click()。

Answer 4

改为使用.prop('checked', true)。

＆＃13;

$(".brandSection").click(function () {
  $('input[name="brandRadio"]', this).prop('checked', true);
  $(".brandSection").removeClass('selected');
  $(this).addClass('selected');
});

＆＃13;

.selected { color:red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="selection-box">

<div class="row">
  <div class="col-lg-12">
    <div class="selection-box-title">Brand</div>
    <div class="radioStyle clearfix brandSection">
      <input name="brandRadio" id="brandRadio" type="radio">
      <label class="selection-box-label col-lg-12">
        <span class="col-lg-6">Desktop </span>
        <span class="col-lg-6 text-right">From $500 </span>
      </label>
    </div>
    <div class="radioStyle clearfix brandSection">
      <input name="brandRadio" id="brandRadio" type="radio">
      <label class="selection-box-label col-lg-12">
        <span class="col-lg-6">Mac </span>
        <span class="col-lg-6 text-right">From $500 </span>
      </label>
    </div>


  </div>
</div>

＆＃13;

Answer 5

首先，您对两个单选按钮使用相同的ID。元素ID应始终是唯一的。其次，请将$('brandSection')更改为$('.brandSection')

请使用以下内容：

$(".brandSection").click(function () {

   var radButton = $(this).find('input[type=radio]');
   $('.brandSection').removeClass('selected');
   $('input[type=radio]').removeAttr('checked');
   $(radButton).attr('checked', 'checked');
   $(radButton).addClass('selected');

});

以下是jsfiddle

Answer 6

您可以使用$（this）添加一行以使brandSection与该类一起使用。

$(".brandSection").click(function () {
        $(this).find('input[type=radio]').prop('checked', true);

        $('.brandSection').removeClass('selected'); 
        $(this).addClass('selected');
});

jQuery单选按钮单击

6 个答案: