get value of a checked bootstrap checkbox

Question

I have this HTML form:

<div class="animated-switch">
  <input id="switch-success" name="switch-success" checked="" type="checkbox">
  <label for="switch-success" class="label-success"></label>
</div>

How i can know if the input is checked or not ?

I tried like this but nothing alerted:

$(document).on('click','.animated-switch',function(e){
    alert($('#switch-success:checked').val() );
});

Here a JSFIDDLE file in order to see my clear example: https://jsfiddle.net/s2f9q3fv/

http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery — Isabel Inc, Aug 25 '16 at 18:48
Possible duplicate of [How to check if a checkbox is checked in jQuery?](http://stackoverflow.com/questions/901712/how-to-check-if-a-checkbox-is-checked-in-jquery) — Adam Konieska, Aug 25 '16 at 18:49
If literally *nothing* is alerted, maybe you haven't included the jQuery library. Check for errors in your browser console. — showdev, Aug 25 '16 at 18:50
@DavidR This doesn't solved the problem, nothing alerted too :) — Brave Type, Aug 25 '16 at 18:50
@showdev all things is good ... jquery included and all others things works well like modal etc ... — Brave Type, Aug 25 '16 at 18:51

Kristijan Iliev · Accepted Answer · 2016-08-25T20:02:59.327

Your code works fine in the snippet. You have forgotten to add value to your checkbox, but even without it you should be able to see the alert message with undefined value (see below the value 'test' was added in the snippet).

$(document).on('click','#switch-success:checked',function(e){
    alert($('#switch-success:checked').val() );
});

.animated-switch > input[type="checkbox"] {
  display: none; }

.animated-switch > label {
  cursor: pointer;
  height: 0px;
  position: relative;
  width: 40px; }

.animated-switch > label::before {
  background: black;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  position: absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px; }

.animated-switch > label::after {
  background: white;
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px; }

.animated-switch > input[type="checkbox"]:checked + label::before {
  background: inherit;
  opacity: 0.5; }

.animated-switch > input[type="checkbox"]:checked + label::after {
  background: inherit;
  left: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="animated-switch">
  <input id="switch-success" name="switch-success" checked="" value="test" type="checkbox">
  <label for="switch-success" class="label-success"></label>
</div>

UPDATE: You should bind the click event on the checkbox itself, not the parent. Try the snipped again with the fancy animation. Notice if you want the alert always to be executed you have to remove the :checked attribute in the selector.

check this jsfiddle and you will see that this call the two one undefined + test: https://jsfiddle.net/s2f9q3fv/ — Brave Type, Aug 25 '16 at 18:59
it is because of the style animations you have added. when you remove the css it fires ones per click — Kristijan Iliev, Aug 25 '16 at 19:03
The modification detecte only when checked, how to get the two results ? checked and not checked ? thank's — Brave Type, Aug 25 '16 at 21:13
I wrote you in the update, remove the attribute `:checked` and it will execute on both states (checked and unchecked) — Kristijan Iliev, Aug 26 '16 at 05:56

score 0 · Answer 2 · answered Aug 25 '16 at 19:10

0

Try this

$(".animated-switch").change(function () {
    alert($('#switch-success:checked').val() );
    });

answered Aug 25 '16 at 19:10

badrb

1
1

score 0 · Answer 3 · answered Aug 20 '20 at 23:57

I still had problems and came up with a workaround:

<input class="form-check-input" type="checkbox" id="inlineCheckbox1" 
onclick="document.getElementById('inlineCheckbox1').setAttribute('value', 
document.getElementById('inlineCheckbox1').value * -1)" value='-1'>
<label class="form-check-label" for="inlineCheckbox1">1</label>

I set a 'onclick' event and I set a 'value' attribute to -1. When you click on the checkbox or the label, 'value' will change its sign. So when you want to get the value, grab the 'value' attribute and check if it's greater or less than zero.

get value of a checked bootstrap checkbox

3 Answers3