Checkbox input not checking when clicked (CSS toggle switch styling)

Question

I am using a custom CSS toggle switch to style my checkbox inputs. GitHub Project

However, when you click one of the checkbox toggles, it registers the click twice and never changes the checked value. If the checkbox starts off unchecked, it will remain unchecked. If it starts off checked, it will remain checked.

I've made a fiddle demonstrating the issue: https://jsfiddle.net/w1ug4jdc/

The HTML for the styled checkbox looks like this:

<label class="switch-light switch-candy" onclick="doSomething($(this));">
  <input type="checkbox" />

  <strong>
    Wireless
  </strong>

  <span>
    <span>Off</span>
    <span>On</span>
    <a></a>
  </span>
</label>

This is the CSS file where all the styling is done: https://github.com/ghinda/css-toggle-switch/blob/master/dist/toggle-switch.css

your fiddle seems to be working just fine – CzarJohn Demafeliz Mar 03 '16 at 05:23 — CzarJohn Demafeliz, Mar 03 '16 at 05:23

score 2 · Accepted Answer · edited May 23 '17 at 12:31

Use .prop() not .attr() for checked status as checked is a property of the element and do not use inline event binding.

Also refer .prop() vs .attr()

Try this:

$('.switch-light.switch-candy').on('click', function() {
  $('#updates').append('<p>checked=' + $(this).find('input').prop('checked') + '</p>');
})

<link href="https://merkd.com/engine/ui/themes/lux/assets/css/toggle-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="switch-light switch-candy">
  <input type="checkbox" />

  <strong>
    Wireless
  </strong>

  <span>
    <span>Off</span>
  <span>On</span>
  <a></a>
  </span>
</label>

<div id="updates"></div>

Fiddle

To bind event over input element and get input specific value:

$('.switch-light.switch-candy input').on('click', function() {
  $('#updates').append('<p>checked=' + this.checked + '</p>');
})

<link href="https://merkd.com/engine/ui/themes/lux/assets/css/toggle-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="switch-light switch-candy">
  <input type="checkbox" />

  <strong>
    Wireless
  </strong>

  <span>
    <span>Off</span>
  <span>On</span>
  <a></a>
  </span>
</label>

<div id="updates"></div>

Updated Fiddle

Is there a clean way to get it to only register one click instead of displaying "unchecked...checked" for one click? — SISYN, Mar 03 '16 at 05:33
The updated code snippet you posted in your answer works great, but the Updated Fiddle still produces the old undesired effect. Of course still marking your answer as correct, just thought you may want to fix the fiddle with the same code to help future visitors avoid confusion. Thanks for the help! — SISYN, Mar 03 '16 at 16:01
I'm glad it helped! I have updated the fiddle.. _Happy Coding_ — Rayon, Mar 04 '16 at 03:54

score 0 · Answer 2 · answered Mar 03 '16 at 05:26

0

Attach the onclick event to the input not the label: https://jsfiddle.net/w1ug4jdc/1/

  <input type="checkbox" onclick="$('#updates').append('<p>checked='+$(this).find('input').attr('checked')+'</p>');" />

(But as above, don't use inline events)

answered Mar 03 '16 at 05:26

Tim Ackroyd

636
8
24

Shiyou · Answer 3 · 2016-03-03T05:32:45.477

0

It seems jQuery didn’t read the “checked” attribute.

Try to use :checked selector

$("label").click(function(){
  $('#updates')
    .append('<p>checked='+$(this).find(':checkbox').is(':checked')+'</p>');
})

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label onclick="">
  <input type="checkbox" />
</label>

<div id="updates"></div>

edited Mar 03 '16 at 05:32

answered Mar 03 '16 at 05:27

Shiyou

121
1
4
16

score 0 · Answer 4 · answered Mar 09 '23 at 07:02

I've just run into a similar problem, attempting to configure this with asp net core MVC. The form submit didn't work with the checked property alone.

I added the below jQuery snipped to keep the checked attribute inline with the check property.

    $(document).on('click', '.switch-light.switch-candy input', function () {
    $(this).attr("checked", this.checked);
});

I originally picked the label for the event listener, however the control only reacted on the second click (which got annoying).

Love the library, by far the best i've seen without the added complexity

Checkbox input not checking when clicked (CSS toggle switch styling)

4 Answers4