If input value equals specific string add class

Question

I know there is some topics similiar to this one. But those didnt hel me. I have html like this:

<span class="wpcf7-list-item first">
 <label>
  <input type="checkbox" name="checkbox-143[]" value="customer service">
  <span class="wpcf7-list-item-label">medicine</span>
 </label>
</span>

For now I have jquery like this:

$(document).ready(function(){
  if ($("input").val() == "customer service") {
      $(this).addClass("cust-serv");
  }
});

What I whand to do is add Class to input when it has specivic value. In this example this value is "customer service" and I want to add class "cust-serv".

Can You help me with that? Thx!

Do you also want it JS to check when the value changes or just when document is ready? If not you need to reference the addClass() to a specific element not $(this) — Max Allan Niklasson
– Max Allan Niklasson, Commented Feb 13, 2018 at 10:28
an if - statement does not create its own context. You are adding the class to the document — user3154108
– user3154108, Commented Feb 13, 2018 at 10:28

guradio · Accepted Answer · 2018-02-13 10:30:06Z

2

Loop through all the input so you can use the context this

$("input").each(function() {
  if ($(this).val() == "customer service") {
    $(this).addClass("cust-serv");
  }


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-list-item first">
 <label>
  <input type="checkbox" name="checkbox-143[]" value="customer service">
  <span class="wpcf7-list-item-label">medicine</span>
</label>
</span>

answered Feb 13, 2018 at 10:30

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

Comments

void · Accepted Answer · 2018-02-13 10:28:44Z

1

In your code this does not refers to your input field. So instead of using this use "input" again

$(document).ready(function(){
  if ($("input").val() == "customer service") {
      $("input").addClass("cust-serv");
  }
});

Though I would suggest you to use some more specific class as a selector.

answered Feb 13, 2018 at 10:28

void

36.8k10 gold badges72 silver badges111 bronze badges

Comments

Léo R. · Accepted Answer · 2018-02-13 10:31:32Z

0

In your example, "this" is not linked to your class so replace :

$(this).addClass("cust-serv");

with :

  $("input").addClass("cust-serv");

answered Feb 13, 2018 at 10:31

Léo R.

2,7161 gold badge13 silver badges23 bronze badges

Comments

Sanjeev Kumar · Accepted Answer · 2018-02-13 10:40:29Z

0

Simply do by using

$(document).ready(function(){ 
$("input").each(function(){
if($(this).val() == "customer service"){
 $(this).addClass("cust-serv"); 
}});
 });

answered Feb 13, 2018 at 10:40

Sanjeev Kumar

851 silver badge9 bronze badges

Collectives™ on Stack Overflow

If input value equals specific string add class

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related