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

Question

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?

Jon Uleis · Accepted Answer · 2017-12-04 21:53:10Z

4

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");  
});

answered Dec 4, 2017 at 21:53

Jon Uleis

18.9k3 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robert · Accepted Answer · 2017-12-04 21:53:45Z

0

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");
});

answered Dec 4, 2017 at 21:53

Robert

6,9871 gold badge23 silver badges28 bronze badges

2 Comments

Jon Uleis Over a year ago

This will remove the class from ANY buttons on the page, not just the ones in that question.

Robert Over a year ago

Bah! I misread the OPs question and thought that was what they wanted - your answer involving .siblings() is definitely the way to go!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related