obtain a box in place of a horizontal line

  • I am attempting to achieve three different states for a checkbox: one with a tick mark, another as a box, and a third as empty.
  • While the code pen is working well with a horizontal line, I am wondering how to display a box instead of a horizontal line.

Link to Code Pen Example

  • However, when using fiddle, I encounter an error: (index):418 Uncaught ReferenceError: ts is not defined at HTMLInputElement.onclick
    • Could someone assist me in resolving this issue?
    • Please find my code provided below.

Link to JSFiddle Example

  function ts(cb) {
  if (cb.readOnly) cb.checked=cb.readOnly=false;
  else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}

Answer №1

When working in jsFiddle, the javascript code is automatically enclosed within an event handler and not placed in the global scope.

To resolve this issue, it's recommended to bind your onclick event handler using javascript instead of directly in the HTML. This practice should be followed regardless of whether you are using jsFiddle or any other platform.

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

Unable to properly cancel a post request using abort functionality

In the process of building a Next.js app, I encountered an issue with calling a post request. I included a cancel button to halt the post request, and attempted to use abortController in conjunction with Axios (v1.4.0) to achieve this. Even though the &ap ...

Where is the response coming from within res.json()?

I am currently exploring the routing section and attempting to unravel the functionality within this code snippet, particularly with regards to res.json. router.get('/', function(req, res){ db.find() .then(function(todos){ res.json(todos ...

What could be the reason for Middleware.statics not being acknowledged?

Attempting to open an html file created in vsCode using java and the app.use Middleware Function, but encountering issues. Here is an overview of the error and what is being attempted try { app.use(Middleware.statics(Paths.get("src/www&qu ...

After reducing the document.domain, the contentWindow of the iframe is met with an Access Denied error

Today, I decided to create an IFRAME dynamically using the following code snippet: var newIframe = document.createElement("iframe"); newIframe.id = 'NewFrame'; newIframe.src = 'NewFrame.html'; document.body.appendChild(newIframe); ...

The challenge of optimizing Angular websites for SEO while also addressing page reload issues

I am struggling to create SEO-friendly URLs in my Node server backend. I want URLs like the following: http://localhost:3003/my-new-mobile //product http://localhost:3003/my-new-category //category http://localhost:3003/my-first-blog-post // blog post I ...

What is the best way to align the checkbox and label in a React form?

I've been struggling to align the labels next to the checkboxes on this form. I'm currently utilizing React with React-Hook-Form for validation and state management (you can find the code on GitHub: https://github.com/cipdv/ciprmt-mern/blob/main/ ...

Deletion of an element with Reactjs upon clicking

A photo gallery consists of a collection of photos with corresponding delete buttons. Below is the HTML snippet for a gallery containing two images: <div> <div class="image"> <img src="URL1"> <button class="remove">X</ ...

The Node.js server seems to be continuously loading without producing any output

I've been struggling with getting my server to function properly. Whenever I send post data, the page just keeps loading and doesn't display any results. Here is a snippet of my Node.js file: var http = require('http'); var url = requi ...

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Currently, I am working on a website with only one HTML page. The main functionality involves fetching the URL to extract an ID and then sending it to an API using an AJAX call. Upon success, the data related to the extracted ID is displayed on the page. H ...

Check to see if the date selected from the HTML5 date picker is in the past compared to the current date

When working with HTML, I have a task where I need to input a date (mm/dd/yyyy) using the new HTML 5 date picker: <input name="date" type="date"> My goal is to validate whether the date entered is older than today's date. $this_date = $_POST ...

Is it possible to have a page transition when clicking a form button

I've been experimenting with this on my website Everything is functioning well, except when I add data-ftrans="slide" to a form button. For example: <form action"http://google.com"> <button data-ftrans="slide" type="submit" style="h ...

What tool can be used for formatting and syntax highlighting when working with ejs (embedded javascript) templates?

When working on my project, I utilize EJS as the express templating engine. While it is user-friendly and efficient, I have encountered difficulties when it comes to editing files - the text highlighting could be better, and I have not been able to find an ...

Retrieve the user ID by utilizing the phonegap login feature integrated with Facebook

I'm working on a feature that lets users upload photos to my server once they log in using their Facebook credentials. I'm currently using the phonegap facebook plugin for Android. How can I retrieve their unique user ID from the Facebook SDK? Al ...

"The Vue.js/JavaScript object updates, but the changes are not being displayed in the document object model (DOM

Currently, I am endeavoring to iterate through an array of objects and display them as list items. There is a click listener that introduces a custom property to the object, and a class binding depends on the value of that property. Would you mind reviewin ...

removing the http:// or https:// from a JavaScript string

I am dealing with the following collection of strings http://example.com https://example.com http://www.example.com Is there a way to remove the http:// or https:// prefixes from these URLs? ...

Can anyone share tips on how to ensure that text placed over an image can adapt and respond effectively

I'm facing some difficulty in ensuring that my text remains responsive alongside the image it's paired with, especially on mobile view. This is how the module appears in desktop/tablet view: https://i.sstatic.net/85mik.jpg And here is its appe ...

Django and VueJS: Error 403 - Forbidden request due to missing or incorrect CSRF token

My tech stack includes Django and Django REST framework on the backend, along with Vue.js on the frontend. While GET requests function smoothly and POST requests using Postman or Insomnia work fine, encountering an error in the Browser console when sending ...

using mathematical calculations to determine opacity levels in a set of rules

I'm attempting to multiply opacity values. I have experimented with the following: calc(@opacity * 100) @opacity-ruleset { filter:alpha(opacity= (@opacity * 100)); -moz-opacity:@opacity; opacity: @opacity; -webkit-opacity: @opacity; } Is there a wa ...

What is the method to trigger a confirmation message from the backend code in ASP.NET?

Hello, I am looking to trigger a client-side JavaScript confirm message from the code-behind in ASP.NET. I need to capture the true or false return value from the confirm message. Currently, I am attempting to do this using the following method, but it s ...

jQuery - handling dynamically added elements on page load

After incorporating certain elements into the view, I want to trigger an event. I've attempted to achieve this using the code below, but it doesn't seem to work: $(".featWrap").on("load", ".box", function() { $(".featWrap").slick({dots: t ...