Tips for clearing a highlighted selection in mark.js without affecting other selections:

I have a form set up to highlight matching text as you select checkboxes on the page. It works well when checking boxes, but if you uncheck one box out of many checked, all highlights disappear. I want it to only remove the highlight from the unchecked box that was changed.

As someone new to JavaScript, I'm unsure if I'm overlooking something obvious or not, but I can't figure out why this is happening.

Here's an example function that manages highlighting for a single checkbox. You can view my complete code on JS Fiddle at: https://jsfiddle.net/gosem01/kf8az926/1/

function highlightArrowsOnCheck() {
  var instanceArrows = new Mark(highlightedParagraph);
  var options = {
    "debug": true,
    "log": window.console
  };

  if (checkedArrows.checked) {
    instanceArrows.markRegExp(/\«|»/g, options);
  } else {
    instanceArrows.unmark(options);
  }
}

For more information on mark.js, visit the documentation here:

Answer №1

To indicate or remove a group, utilize the className parameter.

function highlightArrowsOnCheck() {
  var instanceArrows = new Mark(highlightedParagraph);
  var options = {
    "className": "arrows", // added
    "debug": true,
    "log": window.console
  };

  if (checkedArrows.checked) {
    instanceArrows.markRegExp(/\«|»/g, options);
  } else {
    instanceArrows.unmark(options);
  }
}

View Demo

Note: The togglecheckall function has been simplified by triggering the event programmatically.

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

Present the retrieved JSON data values in an alternative layout on the table

I am facing an issue with the data display in my current table setup. The data is fetched from an SQL server, encoded into JSON format, and the structure of the JSON output is causing a problem for me. You can see how it looks like here: The challenge I a ...

Vue JS: Toggling Checkbox Selections

I'm attempting to create a functionality where checking one checkbox will uncheck another, similar to how radio buttons work. I'm relatively new to Vue.js, so I may be missing something in my code. Here are the two input elements: <label for=& ...

What is the best way to place a background image at the top left and bottom right corners of an HTML element?

I have a paragraph and I would like to visually mark the beginning and end of the paragraph for the user. I have successfully displayed a background image in the upper left corner, but I am unsure how to position the background image in the lower right co ...

Getting just the outer edges of intricate BufferGeometry in Three.js

Currently, I am immersed in a project that involves zone creation and collision detection using Three.js. The primary objective is for my application to effectively manage collisions and produce a BufferGeometry as the final output. My aim is to visually r ...

Issue TS7053 occurs when trying to access any index of the target of a React.FormEvent<HTMLFormElement>

I've been working on adapting this tutorial to React and TypeScript. Here is the code snippet I have implemented for handling the onSubmit event: const handleSignUp = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); ...

Increasing a variable in MongoDB using Meteor.js based on the value of a variable in a separate document

I am facing an issue similar to this: I am struggling to modify multiple documents simultaneously. click: function() { var power = Meteor.user().power; var mult = Meteor.user().mult; Meteor.users.update({ _id: this.use ...

Serve an image in Node.js from a location outside of the public folder

Is there a way to display an image that is located outside of the public folder in my webroot? Here is my directory structure: Webroot --core ----views ----public <- Stylesheets and other images are stored here ------index.ejs <- I want to display f ...

Develop a payment confirmation session using Stripe and Node.js

I have set up a POST request using Stripe to handle customer payments let paymentData = { errorMsg:'', key: process.env.STRIPE_PUBLIC_KEY } const session = await stripe.checkout.sessions.create({ payment_method_types: ...

Retrieve MySQL data and insert it into a new table row using jQuery

I am relatively new to using jquery and AJAX and I am unsure if AJAX would be beneficial in this particular scenario. I came across a similar question that seems to be related to what I am looking for. Add new row to table using jQuery on enter key button ...

Is there a way to first run my validate function and then proceed with sending my AJAX request upon clicking a button?

Hey there! I've got a dynamic table generated from a database. You can check out the table. I have all the necessary code in place, but what I really need is to ensure proper timing of execution for specific actions: 1) Verify if all mandatory fields ...

Use Javascript to conceal a div element if there are no links present

I am working on a website using ModX CMS and I am attempting to hide or remove a div element when it does not contain any anchor tags. How can I achieve this? I have already attempted the following code without success: jQuery(function($) { if ($(".pages ...

Use JavaScript to smoothly move a span to a specific location on the page

My challenge lies in enabling users to dynamically create a span at any desired location upon clicking the "Link" button. The issue I'm facing is that although I set the attribute draggable="true" for the dynamically created span, it remains fixed wit ...

Managing numerous updates within a single collection field across Mongo and JavaScript

Let's imagine I have a document with the following data: { maxCountAllowed:100, currentCount:99 } Now, I have an API that users can call to increment the currentCount as long as it has not reached 100 yet: if(document.currentCount < document ...

"Revolutionize real-time data updates with Node.js, Redis, and Socket

Greetings! I am currently working on a project for my school that involves creating a "Twitter clone." My goal is to incorporate a publish subscribe pattern in order to facilitate real-time updates. One key feature users will have access to is the abili ...

Navigating to the bottom of a page once an element is displayed (with react-slidedown)

I'm facing a bit of a challenge here that I haven't been able to resolve yet. So, I have this optin form that is revealed upon clicking on a link. The reveal effect is achieved using react-slidedown. The issue I'm encountering is that when ...

What steps can I take to avoid unnecessary re-rendering of a variable that is not utilized in the HTML of my vue.js component?

I am currently in the process of replicating a real-life example of my code. In the actual code, this line represents a component that will continuously fetch an endpoint every few seconds, retrieving a random array of length "n", encapsulated wi ...

Ways to both retrieve a variable and clear it simultaneously

In my validator library, there are functions that sanitize and validate strings. These validator functions add error messages to an array called "errors" for each invalid input they encounter. After completing validation on all inputs, I collect the error ...

Tips for modifying style.display using JavaScript

On my website, the menu is structured like this: <nav id="menu"> <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label> <input type="checkbo ...

Exploring the capabilities of AngularJS for efficient testing using Jasmine alongside mixpanel integration

Within my AngularJS application, I implement MixPanel for analytics by using the asynchronous script in my index.html file. index.html <script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script ...

Python on the server side generating a downloadable zip file

After passing a parameter from my client to a python script on the server through a GET request, the script initiates a process that results in the creation of a zip file. However, upon making an AJAX call in my client-side JavaScript, I am only able to co ...