After checking the checkbox to add a class, I then need to remove that class without having to interact with the entire document

When I click on a checkbox, an animation is added to a div. However, I am struggling to remove this animation unless I click elsewhere on the document. The goal is for the checkbox to both add and remove the class.

JS

 $('#inOrder').click(function(e) {
    $('.border').addClass('colorsborder');
    e.stopPropagation();

  $(document).click(function(e) {
    $('.border').removeClass('colorsborder');
  });

  });
  $('#inOrder').click(function(e) {
    e.stopPropagation();
  });

HTML

<input id="inOrder" type="checkbox" /> 

Answer №1

To add or remove classes from a specific element using jQuery, you can utilize the toggleClass() method. This method will either add the specified class if it's not already present or remove it if it is.

  • When the element does not have the desired class, it will be added.
  • If the element already has the class, it will be removed.

For a practical example showcasing this functionality, consider the following live demo:

const checkbox = $('#inOrder'),
  relatedDiv = $('#related');

checkbox.on('change', () => relatedDiv.toggleClass('custom'))
/** just for demo purpose */

#related {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ccc;
}

#related.custom {
  border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inOrder" type="checkbox" />
<div id="related">My appearnace will change on checkbox click</div>

Please note that the above demonstration serves as an illustration of a potential solution and may require modifications to align with your specific code structure in order to achieve the desired outcome.

Answer №2

Make sure to toggle the class on checkbox click instead of just adding it

$('#inOrder').click(function(e) {
    $('.border').toggleClass('colorsborder');
....

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

regex execution and testing exhibiting inconsistent behavior

The regex I am using has some named groups and it seems to match perfectly fine when tested in isolation, but for some reason, it does not work as expected within my running application environment. Below is the regex code that works everywhere except in ...

Using jQuery UI tabs with AJAX responseData

I have a collection of items labeled A, each containing a subset of items called B. The presentation of the B items within A is designed to appear as tabs using jQuery UI tabs. To display the list of A items on a page, I utilize a controller, and then load ...

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

The bxslider is displaying blank space when set to an infinite loop

I've incorporated a bxslider into my project using the following code: jquery: $(document).ready(function () { $('.bxslider').bxSlider({ minSlides: 2, maxSlides: 3, slideWidth: 340, mo ...

Activate an update of a jQuery color selector plugin when there is a change in the input field

Currently, I am utilizing the jQuery .click() method to update 15 text fields with basic color hex values like this: document.form1.top_menu_bgcolor.value = '#FFFFFF'; In addition, I have incorporated ExColor for jQuery from which showcases an ...

Is it possible to use Javascript to retrieve a variable from a remote PHP file?

I am trying to retrieve a variable from a remote PHP file using JavaScript in my phonegap application. The same origin policy doesn't apply here, so I believe I need to use JSON/AJAX for this task. However, I have been unable to find any tutorials tha ...

Previewing multiple images with multiple file inputs

I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range f ...

Unresolved issue with AngularJS radio button binding

As a beginner in using Angular.js, I encountered an issue with data binding when dealing with radio buttons. The HTML code in question is: <label class="options_box" ng-repeat="item in item_config_list.item_config"> <input type="radio" name ...

Issue with resizing Ionic carousel when making an $http request

In my Ionic project, I am utilizing a plugin to create a carousel (https://github.com/ksachdeva/angular-swiper). The demo of this plugin includes a simple repeat function. However, when I replaced the default repeat with my own using $http, it caused an is ...

Guide on using jQuery to replace the applied css of an aspx control

My dilemma revolves around an AspxFileManager. I am attempting to distinguish a file when it is loaded by adding a class that places a border around the element. My initial attempt using .attr('style', 'border: 10px!important'); was uns ...

Successful jQuery Ajax request made without the need for JSON parsing

I find it strange that my experience with jQuery's ajax function is completely different from what I'm used to. Below is the javascript code in question: $.ajax({ url: "/myService.svc/DoAction", type: "GET", dataType: "json", su ...

Querying data with parameters in a client-side rendered application with Next.js

Currently, I am developing a chat application using Next.js and Axios. One of the functionalities I implemented is a dynamic route called chat/:pid to fetch data using the provided pid. However, I encountered an issue where the values are coming back as un ...

Issues with the initial drop functionality in jQuery UI

How come the jQuery code does not work properly on the first drop? $(".drag").draggable({ revert: 'invalid', drag: function(event, ui) { $(this).addClass('valid'); } }); $("#droppable").droppable({ accept: '.valid&apos ...

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

Exploring the capabilities of Angular and UIGrid for fetching table information

I have been utilizing Angular along with uigrid, which is an excellent library for displaying data in a tabular format. Everything looks good when displaying the table. However, when I update an item and click on a Save button that triggers a rest service ...

Navigating through complex immutable entities

I am having trouble working with multidimensional immutable arrays. I would like to make my array immutable, but I'm not sure how to do so. Consider the following data structure: // data { // item { name: someName, todos: [ ...

Utilizing dropdown list values within the context of $.getJSON: A practical guide

This is the script that I have written. $.getJSON("Employee.js", function (data) { var sample = data.one;alert(sample) }); Below you can see the contents of the Employee.js file: var sample={ "one":"Manager","two":"Sr.Eng","three":"Eng" } I am ...

Retrieving various pieces of data in Express

After scouring through various websites, I am still unclear on how to extract multiple GET variables using Express. My goal is to send a request to a Node.JS Express server by pinging the URL with: file_get_contents('http://127.0.0.1:5012/variable1/v ...

How can I use jQuery to pre-select an option in two connected dropdown lists that are populated with JSON data?

I am currently dealing with two interconnected dropdown lists for country and city selection. The options are populated using JSON data, but I've encountered a couple of issues along the way. The first issue is: How can I set the default selected opti ...

I'm curious about the specific purpose of /1 in font styling at 16px

Can anyone explain the purpose of /1 in the font: 16px/1 style declaration? I removed the /1 from the code and noticed increased spacing between lines. What is the specific role of /1 in this situation? body { font: 16px/1 'Open Sans', sans ...