Implementing a Jquery check based on a checkbox

Hey, I'm having an issue with a condition. When I uncheck the checkbox, it doesn't uncheck. I've tried to make a block display, but the JavaScript isn't working.

I attempted to add:

document.getElementById("Reload").style.display = "block";

$("#customCheck1").on("change", function() {
  if ($(this).is(":checked")) {
    $('#lblauto').text("Auto Reload ON")
    document.getElementById("Reload").style.display = "block";
  } else {
    $('#lblauto').text("Auto Reload OFF")
  }
})

(jQuery)

Please assist, thank you!

javascriptjqueryhtmlcssbootstrap-4

Answer №1

This code should function properly without the need for the 

document.getElementById("Reload").style.display = "block";
line.

$("#customCheck1").on("change", function() {
  if ($(this).is(":checked")) {
    $('#lblauto').text("Auto Reload ON")
  } else {
    $('#lblauto').text("Auto Reload OFF")
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="customCheck1" type="checkbox">
<label for="customCheck1" id="lblauto">Auto Reload OFF</label>

View the working example here: https://codepen.io/anon/pen/pBZYEa

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

What is the correct way to have Material-UI's <TextField/> component return with a ref attribute, similar to <input/> in ReactJS?

Using this particular method: handleClick(event) { const inputText = this.refs.inputText console.log(inputText.value.trim()) } I am attempting to make Material-UI's <TextField/> return the input text accurately with a ref, similar ...

javascriptreduxreactjsmaterial-ui

Converting a JSON array into a single concatenated string

Currently, I am parsing a JSON file that contains data about multiple users. { "SRM": [{ "title": "Firstname Surname", "image": "firstname", "subtitle":"the subtitle" }, { "title": "Firstname Surname", "image": "firstname", "s ...

jqueryhtmljson

Is my jQuery code generating a large number of DOM objects?

I am currently developing a hex dumper in JavaScript to analyze the byte data of files provided by users. To properly display a preview of the file's data, I am utilizing methods to escape HTML characters as outlined in the highest-rated answer on thi ...

javascriptjqueryhtmlperformancegarbage-collection

Merging the outcomes of a JSON call

Presently, I have an async function that returns a JSON response in the form of an array containing two objects. Please refer to the screenshot. https://i.sstatic.net/gCP8p.png How can I merge these objects to obtain: [{resultCount: 100, results: Array(1 ...

javascriptarraysjsonjavascript-objects

Events triggered by JQueryUI's .selectable functionality

I am facing a minor issue with the JQuery .selectable function. My goal is to bind events to each tab. I have successfully handled the click event for each tab, but I'm struggling when it comes to selecting two or more tabs. For instance, if I clic ...

javascriptjqueryjquery-ui

Steps to convert HTML <li> elements into HTML <datalist> elements

In my HTML file, I have a list of objects within li elements that I would like to transfer to an HTML datalist within the same file. I am currently working on a Node.js Express framework application where the data within the li elements is coming from an S ...

htmlnode.jsexpress

Create a sleek Bootstrap 4 webpage featuring a fixed footer and navigation bar. However, the challenge lies in ensuring that the content fills the

Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem ...

cssbootstrap-4

Is it considered safe to display the error message from an AJAX call for security reasons?

When I make my ajax calls, they usually follow this pattern: $.ajax({ type: 'POST', url: '/Controller/DoSomethingSpecial', contentType: 'application/json;', ...

javascriptjqueryajaxsecurityerror-handling

Serialization of forms consistently yields an empty string

In my view, I have a dropdown menu that triggers the insertion of a partial view into a designated div when an option is selected. The following code snippet demonstrates what the view looks like: <div class="container"> <div class="row"> ...

javascriptjqueryajaxasp.net-mvcserialization

What is the best way to set the width of a w2grid to 100%

Has anyone tried using w2grid before? I'm having trouble figuring out how to make it fill its container 100%. Here's the HTML snippet: <div id="a" style="width:100%"> <!-- top left container--> <div>This ...

javascripthtmlw2ui

The error message "TypeError: Unable to access the 'get' property of an undefined vue js object" appeared

Struggling to grasp the concept of vue.js, I am currently navigating my way through understanding how to fetch or call an API. Setting up my index.html and app.js, along with the required packages in the node_modules, has been relatively smooth. However, ...

javascriptvue.js

Node.js Error: The requested URL cannot be found

I have encountered an issue in my Node project where I am getting a 'Cannot GET/' error when trying to open localhost on port 8081. I suspect that the problem lies in correctly reading the HTML file, but I'm not entirely sure. var express = ...

javascriptnode.jsexpress

What is the reasoning behind having blank space between the buttons?

Can anyone help me understand why there is visible space between the buttons in the code example provided below? Despite removing margins and paddings, the whitespace persists. <body> <div class="button-container"> <button>1& ...

htmlcssbutton

The basic node API request is not showing any information

There is a request in my server.js file var Post = require('./../models/post'); //GET ALL POSTS app.get('/api/posts', function (req, res) { Post.getPosts(function (err, posts) { if(err) { throw err; } ...

javascriptnode.jsmongodbexpressmongoose

Searching within a container using jQuery's `find` method can sometimes cause jQuery to lose control

I am trying to extract information from an input field within a table in a specific row. Here is the code I am using: var myElements = $('#myTable tbody').find('tr'); console.log(myElements); This correctly displays the items in the ...

javascriptjqueryhtml

How to simulate loadStripe behavior with Cypress stub?

I am struggling to correctly stub out Stripe from my tests CartCheckoutButton.ts import React from 'react' import { loadStripe } from '@stripe/stripe-js' import useCart from '~/state/CartContext' import styles from '. ...

javascripttypescriptstripe-paymentscypress

I am looking to utilize ajax to upload a batch of images simultaneously

I'm fairly new to coding and I'm working on a project that involves creating a slideshow feature for users to upload photos. Users can upload images and preview them using the following code: function photoPreview (input) { if (input.files ...

jqueryajaxnode.js

PHP disregards the starting 202

Currently, I am developing a PHP API Client to interact with an ASP.net (C#) API. By employing the following Javascript function, I am successfully able to retrieve the data: $.ajax({ type: "POST", url: "https://www.eastmidlandstrains.co.uk/s ...

javascriptphpajaxguzzle

Evaluating the conditional rendering of a React child component using Jest and Enzyme

I am currently working on expanding the test coverage for this particular file: import React, { useContext } from 'react'; import UserContext from '../../contexts/user'; import styles from './index-styles.scss'; const UserLog ...

javascriptreactjsunit-testingjestjsenzyme

Attempting to locate the element's position using Selenium in Python

quem_esta_sacando = driver.find_elements_by_xpath("//div[@class='gameinfo-container tennis-container']/div[@class='team-names']/div[@class='team-name']") this is how I located the correct class, but now I want to ...

pythonhtmlcssseleniumwebdriver