问jQuery单选按钮单击

EN

$(".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>

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

  }

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

// 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>

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