Utilizing :checked selector and toggle() function in jQuery

I'm facing an issue with my jQuery code where the CSS changes are not working as expected. When I test the code, it doesn't apply the CSS changes. If I remove the :checked and just use $("input"), then the CSS works but only when clicking on an input checkbox.

$("input :checked").toggle(function() {
    // Code to execute every odd click;
    $(this).siblings('a').css("text-decoration","line-through");
    $(this).siblings('a').css("color","#aaa");
    $(this).parent('li').css("background-color","#ccc");
}, function() {
    // Code to execute every even click;
    $(this).siblings('a').css("text-decoration","none");
    $(this).siblings('a').css("color","");
    $(this).parent('li').css("background-color","");
});

Can anyone help me figure out what I might be missing?

jquerycsscheckbox

Answer №1

Give this a try:

$('input:checkbox').click(function() {
    if($(this).is(':checked')) {
      // Apply these styles every *odd* time the checkbox is clicked;
      $(this).siblings('a').css("text-decoration","line-through");
      $(this).siblings('a').css("color","#aaa");
      $(this).parent('li').css("background-color","#ccc");
    } 
    else {
      // Apply these styles every *even* time the checkbox is clicked;
      $(this).siblings('a').css("text-decoration","none");
      $(this).siblings('a').css("color","");
      $(this).parent('li').css("background-color","");
    }
});

Check out this jsfiddle link for a visual representation: http://jsfiddle.net/AwMf3/

Answer №2

Descendants are not allowed within input elements. Did you intend to use input:checked instead (without space)?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging Bootstrap 4 columns in a vertical stack

My HTML code is as follows: <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="description" content="description"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li ...

htmlcssbootstrap-4

When attempting to send JSON data to the server using a .ajax() post request, it seems to only be

I am encountering an issue where I am attempting to insert a JSON string into the database by making a call to a web service through an AJAX request. Strangely, when I debug the code using Chrome debugger, the string gets successfully inserted into the DB. ...

jqueryajaxjsonpost

The process involves transferring information from a specific div element to a database. This particular div element obtains its data after receiving an appended ID

It's a bit complicated, but I'm working on creating a tag system. I'm fetching data from a database with an AJAX call using the "@" symbol. Everything is working fine - the tags are being generated, but I'm having trouble retrieving and ...

javascriptphpjquerycssajax

Change URL link after login user with javascript

Is there a way to generate a URL link based on the user's name (gmail)? For example: The code below is somewhat suitable for my needs. However, I am trying to figure out how to automatically retrieve the username and populate it in the input field. ...

javascriptjqueryhtmlhyperlink

Using sinon.js version 1.10, jQuery version 2.1, and making synchronous requests

I have been attempting to simulate a server using sinon.js and calling it with jQuery.ajax, but I am facing issues getting it to work. Here is the code snippet: $(function() { var server = sinon.fakeServer.create(); server.respondWith('POST&apo ...

javascriptjqueryajaxsinon

Mysterious additional spacing

I am facing an issue with aligning my div elements with a 20px margin. Despite setting the margin to 20px, I notice that there are additional 4 pixels rendered when I view it on the browser. Below is the code snippet: .block{ width:50px; height:50 ...

htmlcss

Issue encountered while attempting to send a parameter in an Ajax request using jQuery

While utilizing ajax to invoke a function in my controller, I believe that I have correctly passed the parameters but am encountering an error. This is how my function looks in jQuery var user = $(this).data('user'); var idea = $(th ...

jqueryajax

Tips for displaying content in a stacked format when hovering, similar to a list item (<li>), using jquery/javascript

I am attempting to display different content on hover over text, specifically listing various HTTP error codes. My setup includes 3 icons and text that will reveal specific content based on the text hovered over: success error blocked Below is the JS cod ...

javascriptjquerycss

How can a div be utilized to create a footer with two columns?

Is there a way to design a two-column footer using only divs and no tables? The dimensions of the footer are set at 980px and it needs to include... Copyright 2010 xyz.com (to be placed on the left side) About us | privacy | terms (to be placed on the r ...

cssxhtmlhtml

Making an Ajax call to a RESTful API from another domain

My Restful API functions properly when called from Postman using a specific configuration. I provide the following details on Postman to receive a response: - POST: "" There is no need for authorization. Headers: Content-Type : application/json, username: ...

javascriptjqueryjsonajax

Is there a way to replace the default Laravel pagination CSS class with a custom theme CSS class?

Is there a way to update my Laravel pagination CSS to match my theme's CSS? I need help with this adjustment. Here is the HTML for the theme's CSS: <div class="row mt-5"> <div class="col text-center"> ...

htmlcsslaravellaravel-blade

Internet Explorer: JQuery deselects radio button upon its selection

One issue I have encountered is with a listener for a group of radio buttons in IE. When a radio button is selected, it triggers a database call to populate a select element. However, in IE, after the code runs successfully, the selected radio button becom ...

javascriptjqueryhtml

Loop through a list of items and apply the bootstrap-select plugin to each

In an attempt to incorporate an update button within a loop using bootstrap-selectpicker, I encountered a challenge. Within each iteration of the loop, there is a form containing multiple select elements with selectpicker and a hidden button to save the se ...

javascriptjquerybootstrap-4bootstrap-selectbootstrap-selectpicker

The Bootstrap navigation bar vanishes when viewed on mobile devices

I've integrated Bootstrap 5 with my navbar, but when viewed on a mobile device, the buttons disappear. Even hovering over them doesn't display anything. Is there a solution for this issue? Below is the code snippet: <nav class="navbar na ...

htmlcssbootstrap-5

execute the changePage() function in jQuery using the data stored in localStorage

In my jQuery mobile page, I have a simple setup: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.2"> <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" /> < ...

javascriptjqueryhtmljquery-mobile

Working with JavaScript Events within an Iframe

Is it possible to link an onclick event to an IFrame? I attempted using the HTML attribute, but that approach was unsuccessful. Next, I enclosed it within a div, which also did not work. Finally, I tried setting up a jQuery event handler, only to encounte ...

javascriptjqueryhtmliframe

Showing content within a <div> element using Jquery when clicked

Currently, I am using JSON to retrieve data : $(document).ready(function () { var url = '<%: Url.Content("~/") %>' + "Products/GetMenuList"; $.getJSON(url, function (data) { $.each(data, function (index, dataOption) { ...

jqueryjson

jQuery AJAX calls are unsuccessful, while NodeJS requests are running smoothly

I am experiencing an issue with a RESTful web service that returns JSON. Interestingly, a NodeJS command line test application is able to retrieve the JSON data without any problems: Successful NodeJS Application: var request = require("request"); var bt ...

javascriptjqueryajaxnode.jsrest

Ways to implement a single AJAX function for multiple buttons

I need to call the same AJAX function for multiple buttons. Please assist with the code provided below. This particular code will create buttons and upon clicking on them, it displays details... please assist with resolving this issue. The code generated ...

javascriptjqueryajax