Making divs appear and disappear with the click of a checkbox

Exercise Table:

<table class="table table-image" id="exercise_table">
                <thead>
                  <tr class="bg-hercules-font">
                    <th scope="col">Exercise Name</th>
                    <th scope="col">Body Part</th>
                    <th scope="col">Select</th>
                  </tr>
                </thead>
                <tbody class="checkBox">
                  <tr>
                    <td>Bench Press</td>
                    <td>Chest</td>
                    <td>
                      <div class="form-check form-check-inline" id="checkkk">
                        <input class="form-check-input" type="checkbox" id="checktest" value="option1">
                        <label class="form-check-label" for="checktest"></label>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td>Incline Bench Press</td>
                    <td>Chest</td>
                    <td>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="checktest" value="option1">
                        <label class="form-check-label" for="checktest"></label>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td>Ab Roll Outs</td>
                    <td>Abs</td>
                    <td>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="checktest" value="option1">
                        <label class="form-check-label" for="checktest"></label>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td>Cable Crunches</td>
                    <td>Abs</td>
                    <td>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="checktest" value="option1">
                        <label class="form-check-label" for="checktest"></label>
                      </div>
                    </td>
                  </tr>
                </tbody>

              </table>

Script to Display Arrow Icon:

$('.checkBox :checkbox').change(function() {
    var $this = $(this);

    if ($this.is(':checked')) {

      var newInput = $('<a href="#" id="next_page"><span style="color:#43425D;"><i class="fas fa-arrow-right fa-lg"></i></span></a>');

      $('#here').empty().append(newInput);
      
    } else {
      $('#here').empty();
    }
});

Div Where Arrow Appears:

 <div class="d-sm-flex align-items-center justify-content-between mb-4" id="here">

  </div>

The issue is that multiple arrow icons appear when clicking multiple checkboxes. Need a solution to display only one icon at a time and hide it when no checkbox is checked.

jqueryhtmlcssbootstrap-4

Answer №1

To optimize the process of checking and unchecking checkboxes, one approach is to keep track of the number of checkboxes that are checked. If there is only one checkbox checked (or more than one, as desired), then display an arrow. If all checkboxes are unchecked, remove the arrow. Here's a modified example using html() instead of append():


var checked_counter = 0;
$('.checkBox :checkbox').change(function() {
    var $this = $(this);

    // Increment or decrement the checked counter based on checkbox state
    if ($this.is(':checked')) {
       checked_counter++;
    } else {
       checked_counter--;
    }

    if (checked_counter == 1) {
        // Create the arrow element
        var newInput = '<a href="index.php" id="next_page"><span style="color:#43425D;"><i class="fas fa-arrow-right fa-lg"></i></span></a>';
        
        // Insert the arrow into the designated div
        $('#for-my-arrow').html(newInput);
    } else if (checked_counter == 0) {
        // Remove the arrow element
        $('#for-my-arrow').find('#next_page').remove();
    }
});

HTML Structure:


<div class="d-sm-flex align-items-center justify-content-between mb-4" id="here">
    <a href="add_workout.php" id="link"><h3 class="h4 mb-0 text-gray-800">Cancel</h3></a>
    <div id="for-my-arrow"></div>
</div>

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

floating containers aligned side by side in a perfectly positioned parent container

I'm currently working on aligning a set of buttons within a DIV popup that I've created. My goal is to have the buttons positioned next to each other, but I'm having trouble achieving this. I've attempted using 'float: left', ...

htmlcss

Tips for implementing a sticky sidebar in HTML5 with jQuery

I currently have two files: index.php and aside.php. I've already created the contents of aside.php. Now, I want to make the aside page sticky. To achieve this, I referred to the following link: http://codepen.io/pouretrebelle/pen/yvcBz My struggle ...

jqueryhtmlcss

Guidelines for accurately and appropriately creating divisions in JavaScript using mathematical principles

The program occasionally generates mathematically incorrect divisions, such as 2/0, and does not accept rounded answers like 0.33 or 0.33333 for "1/3". What modifications should I make to the code? Thank you for your assistance and time. document.getEl ...

javascripthtmlmathroundingdivision

Set the value of a hidden form element to match the input of a text field when the form is submitted using jQuery

Is there a way to use jQuery to automatically fill a hidden form field with the value entered in a text field when the form is submitted? Any suggestions on how this can be achieved would be greatly appreciated. Thank you! <form> <input type="h ...

jqueryforms

A POST request to Ajax results in a bad request error code (400)

I am looking for assistance with an ajax call that is not working as expected. I'm having trouble understanding why this is happening. Could someone please review my code and provide some insight? It appears that the call is not reaching the control ...

jqueryajaxspring-mvc

resolve styling issue with image navigation

Struggling to make a CSS image rollover navigation bar and having trouble positioning the images correctly. Seeking assistance in resolving this issue. ...

htmlcssimagemenurollover

The webpage's source code does not display any HTML elements related to Prismic slices

I'm currently using a combination of Prismic and Next.js to build a website and everything is running smoothly. However, when I started optimizing the SEO, I noticed that the page source does not contain the HTML for any Prismic slice, nor does it inc ...

htmlnext.jsprismic.io

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

I'm currently working on a side menu that drops down when hovering over Section One within the <a> tag. I need some guidance on how to make the JavaScript code continuously check the state of the list after a set amount of time in order to autom ...

javascripthtmlcss

Minimizing conditional statements in my JavaScript code

I've just completed the development of a slider and am currently working on optimizing some repetitive if/else statements in the code. The purpose of these conditions is to determine whether the slider has reached the last slide, in which case the nex ...

javascriptjquery

I am facing an issue where the carousel CSS styling is not reflecting on the

Recently, I decided to dive into the world of bootstrap and am experimenting with the carousel feature for the first time. However, I seem to be facing some challenges with styling. Despite trying to adjust the size of my image using CSS, I haven't se ...

htmlcssbootstrap-5

The navigation bar remains fixed while the section heading fails to display properly

================================= My webpage acts like a homepage on the web. The issue arises when clicking on a new link, as my navbar is fixed and covers the section heading. I need the page to display the section heading properly even after clicking o ...

javascripthtmlcss

NodeJS/ExpressJS Image Redirection

Would it be acceptable for an img to have a src value that redirects to another page? In my view, I am using the following img tag: <img src='/images/fileName'/> In app.js app.get('/images/:fileName', subject.image); Here is ...

htmlnode.jshttp-redirectexpress

How can I eliminate the border appearance from a textfield fieldset component in Material-UI?

I have been struggling to remove the border using CSS code I found on Stack Overflow, but unfortunately, the issue persists. If anyone could kindly assist me in fixing this problem, I would be extremely grateful. Can someone please advise me on the specif ...

javascriptcssreactjsmaterial-ui

What steps can I take to ensure my dashboard table is dynamic, updates in real-time, and automatically reflects changes made in my MySQL database

FrontEnd Code import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; import { Chart, Tooltip, CategoryScale, LinearScale, ...

javascriptcssreactjsfrontendbackend

The ASP Classic site is not displaying the expected styles on its elements

Currently, I am revamping an ASP Classic website. The entire site relies on a major CSS file named Main which houses all the styles used. In this file, there are not many styles as the current design is quite basic. Some elements on certain pages have thei ...

htmlcssasp-classic

Alter jquery on mouse click

Hello, I am currently in the process of creating an online photo album. The concept involves displaying a picture with two elements that have onclick events to navigate to the next and previous images in the album. I have written a function for this purp ...

jqueryonclick

Webpack has made Rails .js.erb templates obsolete

Recently, I migrated my Rails application to use WebPack for handling assets, and it has been operating smoothly. However, I encountered an issue with JS templates located in my views directory (*.js.erb) that require jQuery. Since jQuery is included in my ...

javascriptjqueryruby-on-railswebpack

Tips for wrapping the content of a <span> element within a <td> element

Can someone help me figure out how to wrap the content of a <span> tag that is inside a <td>? The style I have applied doesn't seem to be working. Here's the code snippet: <td style="white-space:nowrap;border:1px solid black"> ...

htmlcssasp.net

The Epub text box feature is malfunctioning

I have a quiz task in an epub format where users need to enter their answers in a text box after reading the question. However, I am facing an issue where the text box does not display the keyboard for typing the answer. Is there a solution using javascr ...

javascriptjqueryepubepub3

What is the best way to add two popups to a marker in Leaflet? One triggered by mouseover and another by a click event?

Is there a way to make a title hover over my map markers, but then have a full popup with unique content open up when they are clicked? I attempted to create a legend with a list of markers as links for popups, but I couldn't figure out how to do it. ...

javascripthtmlleaflet