I have a collection of checkboxes styled with CSS sprites. The checkboxes are working well, but I want to make it so that when a user checks all the boxes, a button appears at the bottom of the page.
Any assistance on this matter would be highly appreciated.
I have a JSFiddle example, but I'm not sure if I need to include code here?
Thank you!
Conceptually, achieving this solely with CSS is possible by utilizing the :checked selector alongside the + sibling selector. The CSS code for this approach would resemble the following:
.checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + #the-button {
display: block;
}
While theoretically feasible, I encountered unexpected behavior when testing it on jsFiddle. Moreover, this method is not very practical as it can be challenging to troubleshoot and necessitates a specific HTML structure.
In practice, accomplishing this task would require only a few lines of jQuery. Here's an example of the code I devised:
// cache the collection of checkboxes
var $checkboxes = $('#js-solution .checkbox');
// when a checkbox changes
$checkboxes.change(function() {
// filter out the checked checkboxes
var $checked = $checkboxes.filter(':checked');
// if there are 5 checked checkboxes
if ($checked.length == 5) {
// display the button
$('#the-js-button').css('display', 'block');
// if there are not 5 checked checkboxes
} else {
// hide the button
$('#the-js-button').css('display', 'none');
}
});
The comments included should clarify the functioning of the code, but feel free to seek clarification.
I have juxtaposed both solutions in this fiddle: http://jsfiddle.net/7GN7q/1/
The CSS solution did not yield the desired outcome for me. However, it appears to be Chrome-specific, considering that inspecting the style reveals the application of the rule. Interestingly, toggling display:block in the inspector makes it function correctly. For practical purposes, I would opt for the JavaScript solution.
It's interesting to note that using the selector ~, the input checked no longer needs to be in a consecutive row. It can be spaced out, for example, 5 out of ten. Here is a modified jsfiddle example: http://jsfiddle.net/GCyrillus/sqRaG/
.checkbox:checked ~ .checkbox:checked ~.checkbox:checked ~ .checkbox:checked~ .checkbox:checked ~ #the-button {
display: block;
}
Hi there! I'm a beginner in AngularJS and Bootstrap. I've been using col-md-4 and repeating this div until I retrieve the data from JSON. My issue arises when I use the accordion with headings and drop-down lists. Everything works fine if the num ...
My code structure is as follows: <div id="content-wrapper"> <div id="content"> Main content here </div> </div> On the same page, I also have: <div id="footer-wrapper"> <div id="footer ...
Exploring an animation using CSS transitions and jQuery has been my recent project. The concept involves presenting the user with clickable divs to load a new page. When a div is clicked, it expands to cover the entire screen and transition to the next pag ...
Looking to implement a custom Dark Mode feature for a specific element on my create-react-app website using MUI. I have successfully implemented the Switch to change the state on toggle, but I am having trouble figuring out how to toggle it back and fort ...
In my research on VS2012 documentation, I came across information stating that I should be able to right click a class name in my code and navigate to its definition. This feature is supposed to open the corresponding CSS file and take me directly to where ...
I am currently working with basic HTML and CSS, but I am facing an issue where my background color is only filling a third of the page instead of the entire page. Despite attempting to use the html and body classes for the background color, it did not prod ...
I've spent quite some time searching for a way to achieve the layout displayed in the linked image, but I haven't been successful in finding exactly what I need. https://i.sstatic.net/6xOql.png My goal is to create a responsive layout that inclu ...
Currently, I am working on a feature where images change based on the value selected from a dropdown menu. The code provided below is a simplified version to convey the main idea. Here's the gist of what I have (feel free to ask any questions; please ...
Trying to implement a scrolling effect where the content covers an image from this tutorial video. The issue I'm encountering is that the image is not a background image but an actual image tag. Here's my current code: <section id="home" clas ...
I'm working on a project with a page that utilizes javascript to render a map in SVG using d3. My goal is to automatically obtain a copy of the HTML + SVG generated by this page. Simply curling the server does not work as it only returns the HTML befo ...
I have inserted the following snippet in my HTML file: <script id="tpl" type="text/template"> <div data-id="" class="line"> ... </div> </script> Within my JavaScript code, I am trying to retrieve this template, add it to t ...
In this scenario, there are two distinct divs: check_one and check_two. Within check_one, there are 4 checkboxes, while check_two only has 1. The objective is to create functionality where checking the checkbox within check_two will automatically uncheck ...
I stored the product description as HTML elements in a Database, but when I try to render this data into a div, it displays as a String. I am looking to showcase all the data as HTML elements in my Next JS application. I attempted using JSON.parse, but unf ...
I'm attempting to create a title style similar to what is shown below https://i.sstatic.net/Qao4g.png The issue I'm facing is achieving the underline effect. I tried using title:after but it didn't give me the exact result I'm looking ...
I need to customize the layout of a form to display checkboxes in vertical mode. Specifically, there is a row of checkboxes that I want to appear vertically aligned rather than horizontally. In the past, I was able to achieve this in antd 4 by applying a ...
I am attempting to align the divs within a main div in the center, while keeping the text within the div aligned as usual. This is for a footer sitemap. As of now, this is how it appears: I attempted using text-align: center, but it also centers the text ...
I've come across a challenge while trying to implement clickable table rows with the jquery selectable function. Everything works perfectly fine with li elements, but I seem to hit a roadblock when using tables - the click event just stops working. Wh ...
I recently created a menu on my WordPress site [ and I'm facing an issue with making it display vertically in a responsive way. The code in header.php is as follows: <!-- header --> <header> <div class="overNavPanel"> ...
I am facing an issue with a div that needs horizontal scrolling. It works fine without using -webkit-overflow-scrolling, but on the iPhone, I don't get the native bouncing effect. The scrolling is only happening horizontally when it should also be pos ...
Check out the code snippet below: HTML Code <ul class="menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li& ...