CODEWITHSUNDEEP
javascriptjquery
Kai Tera
Kai Tera

Reputation: 71

javascript find which label.btn clicked on

I am kinda new to javascript and I checked lessons on w3 about javascript but i did not get my answer so far.

I have a question and 4 options and I want to change the color of label.btn that clicked on.

javascript:

$(function(){

    $("label.btn").on('click',function () {
        var choice = $(this).find('input:radio').val();

        $( "#answer" ).html(  $(this).checking(choice) );

        ClickedLabel.style.backgroundColor = "black"; // I want to change te color here
    });

///
};

html:

<div class="modal-body">
<div class="quiz" id="quiz" data-toggle="buttons">
<label id="first" class="element-animation1 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="1">1 One</label>
<label id="second" class="element-animation2 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="2">2 Two</label>
<label id="third" class="element-animation3 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="3">3 Three</label>
<label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="4">4 Four</label>
</div>
</div>

Any help would be appreciated, Thanks!

Upvotes: 0

Views: 270

Answers (3)

Ramin Bateni
Ramin Bateni

Reputation: 17415

A)

Run my code and switch between the options. 

$(function(){
    $("label.btn").on('click',function () {
        $("label.btn").css('background-color','transparent'); 
        $(this).css('background-color','red');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div class="modal-body">
      <div class="quiz" id="quiz" data-toggle="buttons">
        <label id="first" class="element-animation1 btn btn-lg btn-primary btn-block">
          <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <input type="radio" name="q_answer" value="1">1 One</label>
        <label id="second" class="element-animation2 btn btn-lg btn-primary btn-block">
          <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <input type="radio" name="q_answer" value="2">2 Two</label>
        <label id="third" class="element-animation3 btn btn-lg btn-primary btn-block">
          <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <input type="radio" name="q_answer" value="3">3 Three</label>
        <label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block">
          <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <input type="radio" name="q_answer" value="4">4 Four</label>
      </div>
    </div>

OR

In this example I used the closest method to find the wrapper label of the clicked radio button and used .css('background-color','red') to change its color. Also I wrote $("label.btn").css('background-color','transparent'); to reset the color of all options to transparent in each click first.

$(function(){
    $("input").on('click',function () {
          $("label.btn").css('background-color','transparent'); 
          $(this).closest("label").css('background-color','red');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="modal-body">
  <div class="quiz" id="quiz" data-toggle="buttons">
    <label id="first" class="element-animation1 btn btn-lg btn-primary btn-block">
      <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <input type="radio" name="q_answer" value="1">1 One</label>
    <label id="second" class="element-animation2 btn btn-lg btn-primary btn-block">
      <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <input type="radio" name="q_answer" value="2">2 Two</label>
    <label id="third" class="element-animation3 btn btn-lg btn-primary btn-block">
      <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <input type="radio" name="q_answer" value="3">3 Three</label>
    <label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block">
      <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <input type="radio" name="q_answer" value="4">4 Four</label>
  </div>
</div>

B)

Another way is to toggle a active class on the clicked item. I have been written an example based on this way HERE. Toggle a class is a nice way ;)

Upvotes: 1

Andrew Koper
Andrew Koper

Reputation: 7249

$(this).css("background-color","black");

Upvotes: 1

IrkenInvader
IrkenInvader

Reputation: 4050

$(this) will be the label that was clicked. You can use jquery to change the background color through .css

Instead of 

ClickedLabel.style.backgroundColor = "black";

you can use

$(this).css('background-color', 'black');

If you would rather use style.backgroundColor you can get the base element and modify that:

$(this)[0].style.backgroundColor = "black";

Upvotes: 1

Related Questions