CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
SISYN
SISYN

Reputation: 2259

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

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

Upvotes: 0

Views: 2385

Answers (4)

PowerMan2015
PowerMan2015

Reputation: 1418

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

Upvotes: 0

Rayon
Rayon

Reputation: 36609

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

Upvotes: 2

Shiyou
Shiyou

Reputation: 121

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>

Upvotes: 0

Tim Ackroyd
Tim Ackroyd

Reputation: 635

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)

Upvotes: 0

Related Questions