Trying to select only one checkbox at a time

JavaScript
1

I’m trying to make use of this example and making sure that only one checkbox is selected at a time in this JSFiddle but it doesn’t seem to be working.

2

You need to give all checkboxes the same name.

3

Unfortunately, I don’t think that’s possible as the UI code (id and name related) is generated by java spring mvc. Is there any other way of handling it?

4

If you can only select one… it’s a Radio, not a Checkbox, right?

3 Likes
5

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<body>
 <form action="#">
 <fieldset>
  <legend>
   Select one of the checkboxes:
  </legend>
  <label>
   <input type="radio" name="option" value="Change Location">
   Change Location
  </label>
  <label>
   <input type="radio" name="option" value="Update Location">
   Update Location
  </label>
  <label>
   <input type="radio" name="option" value="Retire">
   Retire
  </label>
  <label>
   <input type="radio" name="option" value="Mark as full">
   Mark as full
  </label>
  <label>
   <input type="radio" name="option" value="Move Contents">
   Move Contents
  </label>
  <label>
   <input type="radio" name="option" value="no selection">
   Cancel selection
  </label>
  <input type="submit">
</fieldset>
</form>  

</body>
</html>

CSS

body {
   font: normal 1em / 1.5  sans-serif;
 }
fieldset {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
   border: 0;
   font-weight: bold;
 }
fieldset label {
   font-weight: normal;
 }
input[type="submit"] {
   width: 12em;
 }
6

Yeah, maybe I should convert it to the radio then.

7

thanks. I think radio is the only option. works fine in JSFiddle I tested : https://jsfiddle.net/bkh2q6d1/

8

Lke this? . . . .

9

Thanks. That’s awesome. I guess one next problem I’ve (not shown in JS fiddle) is that based on the checkbox selections, I’m showing some divs when a checkbox is checked and when the box is unchecked, I’m hiding it. When the page loads, I’m hiding these divs.

Is there a way to close and open those divs as well based on the checkbox selection and unselection? I can some up with an example if I’m not explaining well. Thanks again.

10

Where do you want the <div> to appear? Under the corresponding checkbox, under the bottom checkbox or elsewhere?

11

Please take a look at this JSFiddle to get an idea. I added on div for Mark as a full check box. So if I check the mark as full, it will show and if I uncheck it, it won’t show. However, if I check other checkboxes, it will remain on the screen. So I was wondering if there’s a way to hide it once other checkboxes are working. In my actual code, I have some divs showing for all the checkboxes so I want to show divs only when it’s checked and hide the div once its corresponding checkbox is unchecked. I added jQuery just to demonstrate my issue.

12

Is this getting close? . . . .

(First line of JavaScript currently assumes there will be no other checkboxes on your web page)

(It may not be necessary to put hidden content within<div> elements)

13

Yes, thanks. I am going to test this. Appreciate it!

14

Is there a use case where the divs wont be tied to the state of the checkbox?

If not, use CSS for this if at all possible, rather than making every problem a (javascript) nail.

15

Btw I find it really hard to read code where a function is not declared before it is used. Also in this case an inline function would be much cleaner code.

16

JavaScript is being used anyway. Kindly show how the same functionality of the checkboxes and <div> elements can be achieved with CSS alone.

I do not hesitate to use JavaScript :grinning:. If anyone disables JavaScript on their browser, they have to expect many website will not work.

17

Well originally it was CSS3, but I realized that the HTML is malformed, making it require CSS4 as-is.

If left in the current form:

label:has([name="changeLocation"]:checked) ~ #changeLocation,
label:has([name="updateLocation"]:checked) ~ #updateLocation,
label:has([name="retireLocation"]:checked) ~ #retireLocation,
label:has([name="moveContents"]:checked) ~ #moveContents,
label:has([name="markAsFull"]:checked) ~ #markAsFull {
  display: block;
}

If changed so that the input isnt inside the label (the “malformed” part was that there is no close tag on the input, making my eyes see the checkboxes as siblings of the divs. It’s not actually malformed, just throws my eyes off because its two tags deep rather than one with a sibling):

[name="changeLocation"]:checked ~ #changeLocation,
[name="updateLocation"]:checked ~ #updateLocation,
[name="retireLocation"]:checked ~ #retireLocation,
[name="moveContents"]:checked ~ #moveContents,
[name="markAsFull"]:checked ~ #markAsFull {
  display: block;
}
18

I decided against using an inline anonymous function because in my view it is easier for inexperienced coders to understand if a function is not inline. However I appreciate that where there is much more JavaScript it can be a nuisance having to search for the code of a function.

19

Thanks, but can you get the functionality of the checkboxes working with CSS including the ability to untick all checkboxes after one has been ticked (so it’s not like radio buttons)?

20

This looks horrible to me. What if you add another box? You always have to remember changing CSS too.

I hold on my standpoint.

Style → CSS
Functionality → JavaScript