CODEWITHSUNDEEP
jqueryhtmlcss
WebDevGuy2
WebDevGuy2

Reputation: 1249

How to addClass to one button in button group via jQuery?

I have a HTML table with a button group on each row. When the user selects a button I want to highlight that button, and not the others. I'm trying to use a class in order to do this. But, how can I remove this class from the other 2 buttons?

.selectedAnswer {
  font-weight: bold;
  border: 1px solid blue;
}

 <table>
  <tr>
    <td>
      Question 1
    </td>
    <td>
      <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button>
        <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button>
        <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Question 2
    </td>
    <td>
      <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button>
        <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button>
        <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Question 3
    </td>
    <td>
      <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button>
        <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button>
        <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Question 4
    </td>
    <td>
      <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button>
        <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button>
        <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button>
      </div>
    </td>
  </tr>

</table>

Here is the jQuery...

//Set up click event on the Remove button
$('.btn-response').click(function(event) {
  $(this).addClass("selectedAnswer");
});

Link: https://jsfiddle.net/webdevguy2/0mzjyvw2/2/

Any suggestions on a better way to do this?

Upvotes: 0

Views: 231

Answers (2)

Robert
Robert

Reputation: 6977

Your approach is perfectly sufficient; you just forgot to first remove the class from any .btn-response before adding it. Easiest way to do that is just modify your script:

$('.btn-response').click(function (event) {
  // We're removing the class here
  $('.btn-response').removeClass("selectedAnswer");

  // And were adding it to JUST THE CLICKED ONE here
  $(this).addClass("selectedAnswer");
});

Upvotes: 0

Jon Uleis
Jon Uleis

Reputation: 18659

Read about .siblings() in the jQuery API.

Change this:

$('.btn-response').click(function (event) {
  $(this).addClass("selectedAnswer");  
});

To this:

$('.btn-response').click(function (event) {
  $(this).addClass("selectedAnswer").siblings().removeClass("selectedAnswer");  
});

Upvotes: 4

Related Questions