CODEWITHSUNDEEP
javascriptjquerycss
JSRB
JSRB

Reputation: 2613

Why does my jQuery toggle workaround not work?

Since I couldn't make it work with the jQuery toggle function I try to build a workaround which doesn't work as well. If I just go for removeClass onClick, it removes the class. But both the toggle and if..else logic won't work.

Where's my bug?

$('.category-wrapper').click(function() {
    if ($(this).hasClass("category-deselected")) {
        $(this).removeClass("category-deselected")
    } else {
        $(this).addClass("category-deselected")
    }
});
.category-deselected {
  color: red;
}  

.category-wrapper input {
    position: fixed;
    visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
 click me to change color</label></div>

Upvotes: 0

Views: 77

Answers (4)

Abdullah Khan
Abdullah Khan

Reputation: 1473

you can easily toggle a checkbox but you can't toggle a radio cause it checked just once. if you are planning to use multiple radios instead then you can use the following link: JSFiddle click to test the example.

// Multiple Radio Color Change Example:

JSFiddle

// Radio Example:

$(document).ready(function() {
    $('#radio-example input:radio').change(function() {
        $("label").toggleClass("category-deselected");
    });
});
.category-deselected {
  color: red;
}  

.category-wrapper input {
    position: fixed;
    visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
    <div class="row">
    <label for="id_poller_category_17">click me to change color</label>
    <input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>

//Checkbox Example:

$(document).ready(function() {
    $('#radio-example input:checkbox').change(function() {
        $("label").toggleClass("category-deselected");
    });
});
.category-deselected {
  color: red;
}  

.category-wrapper input {
    position: fixed;
    visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
    <div class="row">
    <label for="id_poller_category_17">click me to change color</label>
    <input type="checkbox" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>

Upvotes: 2

Abdelrahman M. Allam
Abdelrahman M. Allam

Reputation: 922

Your code looks Excellent !! you just need to prevent the bubble effect which causes trigger the handler 2 times , you can see more here bubble events

e.preventDefault() 

$('.category-wrapper').click(function(e) {
    if ($(this).hasClass("category-deselected")) {
        $(this).removeClass("category-deselected")
    } else {
        $(this).addClass("category-deselected")
    }
    e.preventDefault(); // <-- this line your solution 
});
.category-deselected {
  color: red;
}  

.category-wrapper input {
    position: fixed;
    visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
 click me to change color</label></div>

Upvotes: 2

Wordica
Wordica

Reputation: 2597

$('.category-wrapper').click(function() {
    if ($(this).hasClass("category-deselected")) {
        $(this).removeClass("category-deselected")
    } else {
         $(this).addClass("category-deselected")
    }
});

Think about your logic ... if hasClass ( remove class) ... else ( addClass )

Your script first check if $(this) hasClass and then remove it ... and then make "else" and addClass

Upvotes: 1

j08691
j08691

Reputation: 207901

The issue is that you have both a <label> and an <input> in your div, and the they both send a click event, which results in your function executing twice, nearly simultaneously. You can get around this by ignoring the click on the label:

$('.category-wrapper').click(function() {
  if (event.target.nodeName !== "LABEL") {
    if ($(this).hasClass("category-deselected")) {
      $(this).removeClass("category-deselected")
    } else {
      $(this).addClass("category-deselected")
    }
  }
});
.category-deselected {
  color: red;
}

.category-wrapper input {
  position: fixed;
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
 click me to change color</label></div>

Upvotes: 1

Related Questions