CODEWITHSUNDEEP
jquery
John Abraham
John Abraham

Reputation: 41

jQuery Radio Button Click

I have an issue with radio button click event via jQuery 11.1. If I click on div the radio button state change to clicked at first time but I click again and again than its not working. Here is my code HTML code

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

Here is jQuery code

<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');

  }


});

Any tweaks I missed on that?

Upvotes: 1

Views: 4439

Answers (6)

madalinivascu
madalinivascu

Reputation: 32354

You have a typo at the class brandSection:

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

  }

Better wrap your code in document ready statement 

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

Select the input relative to the current clicked element using find()

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

I'd suggest, based on some small guesses as to what you want to happen in your code:

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

The error in your original code was the line:

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

The checked attribute doesn't – unfortunately – update the checked property.

References:

Upvotes: 2

T&#226;n
T&#226;n

Reputation: 1

You can try:

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

Upvotes: 3

Anastasis
Anastasis

Reputation: 729

You can add one more line to have the brandSection with the class by using $(this).

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

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

Upvotes: 0

spicydog
spicydog

Reputation: 1714

Use .prop('checked', true) instead.

$(".brandSection").click(function () {
  $('input[name="brandRadio"]', this).prop('checked', true);
  $(".brandSection").removeClass('selected');
  $(this).addClass('selected');
});
.selected { color: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 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>

Upvotes: 0

Nishu Tayal
Nishu Tayal

Reputation: 20820

First of all, you are using same ID for both radio button. Element ID should be always unique. Secondly correct $('brandSection') to$('.brandSection')

Please use following:

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

});

Here is the jsfiddle

Upvotes: 0

Related Questions