Issue with Checkbox Input not Being Checked Upon Click (Styling with CSS Toggle Switch)

Question

Issue with Checkbox Input not Being Checked Upon Click (Styling with CSS Toggle Switch)

I have implemented a unique custom CSS toggle switch to customize the appearance of my checkbox inputs. Check out the project on GitHub.

However, I am facing an issue where clicking on the checkbox toggles registers the click twice and does not change the checked value. The checkbox remains unchecked if it started off that way, and stays checked if initially checked.

To demonstrate this problem, I have created a fiddle: https://jsfiddle.net/w1ug4jdc/

The HTML code for the styled checkbox is as follows:

<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>

You can find all the CSS styling in this file: https://github.com/ghinda/css-toggle-switch/blob/master/dist/toggle-switch.css

javascript jquery html css checkbox

Answer 1

Answer №1

It is recommended to use the .prop() method instead of .attr() when checking the checked status, as checked is a property of the element. Avoid using inline event binding.

For more information, you can visit .prop() vs .attr()

Here is an example code snippet:

$('.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>

View Fiddle

To bind events to input elements and retrieve specific values:

$('.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

Answer 2

It is recommended to use the .prop() method instead of .attr() when checking the checked status, as checked is a property of the element. Avoid using inline event binding.

For more information, you can visit .prop() vs .attr()

Here is an example code snippet:

$('.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>

View Fiddle

To bind events to input elements and retrieve specific values:

$('.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

Answer 3

Answer №2

Make sure to attach the onclick event to the input element instead of the label: https://jsfiddle.net/w1ug4jdc/1/

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

(Remember not to use inline events like shown above)

Answer 4

Make sure to attach the onclick event to the input element instead of the label: https://jsfiddle.net/w1ug4jdc/1/

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

(Remember not to use inline events like shown above)

Answer 5

Answer №3

It appears that jQuery is not recognizing the "checked" attribute.

You can try using the :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>

Answer 6

It appears that jQuery is not recognizing the "checked" attribute.

You can try using the :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>

Answer 7

Answer №4

Encountered a similar issue while trying to set up this feature with asp net core MVC. The form submission wasn't functioning properly with just the checked property.

To solve this, I included the jQuery snippet below to ensure the checked attribute stayed in line with the checked property.

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

Initially, I selected the label for the event listener, but the control only responded on the second click (quite frustrating).

Really impressed with this library - definitely the best I've come across without any unnecessary complexity. Keep up the great work!

Answer 8

Encountered a similar issue while trying to set up this feature with asp net core MVC. The form submission wasn't functioning properly with just the checked property.

To solve this, I included the jQuery snippet below to ensure the checked attribute stayed in line with the checked property.

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

Initially, I selected the label for the event listener, but the control only responded on the second click (quite frustrating).

Really impressed with this library - definitely the best I've come across without any unnecessary complexity. Keep up the great work!

Issue with Checkbox Input not Being Checked Upon Click (Styling with CSS Toggle Switch)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Why does variable passing use 'object Text' instead of passing values?

Specify "Accept" headers using jQuery when fetching data within an iframe

Discovering elements through parent in Selenium

Error encountered while attempting to send a delete request to MongoDB due to connection refusal

How can you extract a specific object from a JSON string?

Having difficulty rendering JSON data on an HTML webpage

Access a local website path using JavaScript upon opening the browser

Maintaining dual sets of files for website design projects

Using jQuery to interact with an API

Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Sending data from JavaScript to PHP using the POST method

An ordered list placed within a div container in an HTML document

Place API for Google Maps

Node.Js Web Scraping: How to Extract Data from JavaScript-Rendered Pages Using Request

The many potentials of looping through Sass maps

Utilizing JavaScript to retrieve input names from arrays

Looking for a JavaScript UI for the optimal mapping experience with either Bing maps or Google maps

AngularJS filter date is returning a value of NaN-NaN-NaN

Tips for retrieving the $(this) element within an ajax success callback function

CSS - setting the background-image property is not displaying the image