how to change text label checkbox bootstrap?

Question

How can I change the text corresponding to a checkbox when it is selected. I want to change the text to one value when selected and reverted back when the box us unselected.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="container">
  <div class="row">
    <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary ck">
    <input type="checkbox"> off
  </label>
  <label class="btn btn-primary ck">
    <input type="checkbox"> off
  </label>
  <label class="btn btn-primary ck">
    <input type="checkbox"> off
  </label>
</div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
  $('input[type=checkbox]:checked').on('change', function () {
    $(this).text("on");
  });
</script>

Wietse de Vries · Accepted Answer · 2016-06-12 21:34:59Z

1

If you put the "off" in a span:

<label class="btn btn-primary ck">
  <input type="checkbox"> <span>off</span>
</label>

you can do this:

 $('input[type=checkbox]').on('change', function() {
    var status = $(this).parent().find('span');
    if (status.text() === "on") {
      status.text("off");
    } else {
      status.text("on");
    }
 });

Check out this fiddle: https://jsfiddle.net/wietsedevries/bahujj8u/1/

answered Jun 12, 2016 at 21:34

Wietse de Vries

6737 silver badges17 bronze badges

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

Comments

Mars Robertson · Accepted Answer · 2016-06-12 21:38:46Z

0

Two things

1) Attaching events to all checkboxes (not only initially checked)

NO: $('input[type=checkbox]:checked')

YES: $('input[type=checkbox]')

2) Changing text of the text, not changing text of the...

NO: $(this).text("on");

YES: $(this).closest("label").text("on");

finally) toogle "on" / "off" text on the label, should be easy :)

answered Jun 12, 2016 at 21:38

Mars Robertson

13.3k13 gold badges73 silver badges93 bronze badges

Comments

Roysh · Accepted Answer · 2016-06-12 21:50:13Z

0

Rearrange your DOM -

<div class="container">
  <div class="row">
    <div class="btn-group" data-toggle="buttons">
     <label class="btn btn-primary ck">off </label>
     <input type="checkbox"> 
     <label class="btn btn-primary ck">off</label>
     <input type="checkbox"> 
     <label class="btn btn-primary ck">off</label>
     <input type="checkbox">    
    </div>
  </div>
</div>

Try this jQuery

$('input[type=checkbox]').on('change', function () {

   if ($(this).prev().text() === 'off') {
    $(this).prev().text('on')
    } else {
    $(this).prev().text('off')
    }
});

Here's a fiddle http://jsfiddle.net/hMS6Y/265/

edited Jun 12, 2016 at 21:50

answered Jun 12, 2016 at 21:34

Roysh

1,5503 gold badges17 silver badges26 bronze badges

Comments

gavgrif · Accepted Answer · 2016-06-12 21:53:24Z

CSS only option :- You could do this with altering the label text and use CSS only - and toggle the display state of the on state text of the label and the off state text:

.btn .off,.btn.active .on {    			
	display:block			
}
.btn.active .off,.btn .on  {				
	display:none			
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


<div class="btn-group" data-toggle="buttons">
	 <label class="btn btn-success active">
	    <input type="checkbox" autocomplete="off" checked>
			<span class='on'>On</span>
            <span class='off'>Off</span>
	</label>
  </div

Pevara · Accepted Answer · 2016-06-12 22:01:34Z

You could go for a javascript free solution (which is always a plus imo), by using the "next sibling" ~ in combination with the :checked selector that can react to the state of your checkbox.

If you add both "on" and "off" lables in your markup, each with their own class, so it looks something like this:

  <label class="btn btn-primary ck">
    <input type="checkbox"> 
    <span class="label-off">off</span>
    <span class="label-on">on</span>
  </label>

Now you can determine which one is visible depending on the state of the checkbox like this:

.label-on {
  display: none;
}
input:checked ~ .label-off {
  display: none;
}
input:checked ~ .label-on {
  display: inline;
}

Have a look at the example I set up: https://jsfiddle.net/a41d85gb/

Collectives™ on Stack Overflow

how to change text label checkbox bootstrap?

5 Answers 5

Comments

Two things

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Two things

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related