What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

Question

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

I'm currently facing a small issue that I believe has a simple solution. My knowledge of Javascript is limited, but I am eager to improve my skills in coding for more visually appealing websites.

My problem lies in the code snippet below, where I am attempting to select between iOS and Android options. However, I want to ensure that only one option can be selected at a time. Currently, both options can be selected simultaneously. Could someone kindly guide me on how to make it so that selecting one option automatically deselects the other if it's already chosen? Your assistance would be greatly appreciated! Thank you!

Link to CodePen Demo

HTML

<h1>Device</h1>
<div class="wrap">
  <ul>
    <li><i class="fa fa-apple"></i></li>
    <li><i class="fa fa-android"></i></li>
  </ul>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);

* {
  box-sizing: border-box;
}
body {
  font-family: 'Lato', sans-serif;
  background: #222;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: tomato;
  font-weight: 300;
  word-spacing: 14px;
  text-transform: uppercase;
}
.wrap {
  width: 400px;
  height: 300px;
  margin: 0px auto;
}
ul {
  margin: 0; 
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
}
ul li {
  display: block;
  width: 50%;
  height: 50%;
  line-height: 150px;
  font-size: 40px;
  color: #fff;
  text-align: center;
  float: left;
  position: relative;
}
.borderOverlay {
  width: 70%;
  height: 70%;
  background: rgba(255, 255, 255, .1);
  border: 3px solid tomato;
  border-radius: 10px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  animation: 0.25s enter;
}
.borderOverlay i {
  position: absolute;
  font-size: 29px;
  color: #222;
  top: -15px;
  right: -13px;
  background: #fff;
  padding: 1px;
  border-radius: 50%;
  animation: 0.75s enter2;
}

@keyframes enter {
  0% {
    transform: scale(0) rotate(-90deg);
  }

  100% {
     transform: scale(1);
  }
}
@keyframes enter2 {
    0% {
     transform: scale(0);
  }
  50% {
     transform: scale(0);
  }
  75% {
     transform: scale(1.25);
  }
  100% {
     transform: scale(1);
  }
}

Javascript

$("li").click(function () {
  if($(this).find('.borderOverlay').length) {
    $(this).find('.borderOverlay').remove();
  } else {
    $(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
  }
});

javascript html css

Answer 1

Answer №1

$("li").on("click", function () {
  var isSelected = $(this).find('.highlightBorder').length;
  $('.highlightBorder').remove();
  if(!isSelected) {
    $(this).append('<div class="highlightBorder"><i class="fa fa-check"></i></div>');
  }
});

Answer 2

$("li").on("click", function () {
  var isSelected = $(this).find('.highlightBorder').length;
  $('.highlightBorder').remove();
  if(!isSelected) {
    $(this).append('<div class="highlightBorder"><i class="fa fa-check"></i></div>');
  }
});

Answer 3

Answer №2

To eliminate the presence of the other's .borderOverlay, simply remove it.

This can be achieved by utilizing $(this).siblings(), which will target all remaining li elements except for the one that was clicked on.

$("li").click(function () {
  if($(this).find('.borderOverlay').length) {
    $(this).find('.borderOverlay').remove();
  } else {
    $(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
    $(this).siblings().find('.borderOverlay').remove();
  }
});

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);

* {
  box-sizing: border-box;
}
body {
  font-family: 'Lato', sans-serif;
  background: #222;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: tomato;
  font-weight: 300;
  word-spacing: 14px;
  text-transform: uppercase;
}
.wrap {
  width: 400px;
  height: 300px;
  margin: 0px auto;
}
ul {
  margin: 0; 
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
}
ul li {
  display: block;
  width: 50%;
  height: 50%;
  line-height: 150px;
  font-size: 40px;
  color: #fff;
  text-align: center;
  float: left;
  position: relative;
}
.borderOverlay {
  width: 70%;
  height: 70%;
  background: rgba(255, 255, 255, .1);
  border: 3px solid tomato;
  border-radius: 10px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  animation: 0.25s enter;
}
.borderOverlay i {
  position: absolute;
  font-size: 29px;
  color: #222;
  top: -15px;
  right: -13px;
  background: #fff;
  padding: 1px;
  border-radius: 50%;
  animation: 0.75s enter2;
}

@keyframes enter {
  0% {
    transform: scale(0) rotate(-90deg);
  }

  100% {
     transform: scale(1);
  }
}
@keyframes enter2 {
    0% {
     transform: scale(0);
  }
  50% {
     transform: scale(0);
  }
  75% {
     transform: scale(1.25);
  }
  100% {
     transform: scale(1);
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

<h1>Device</h1>
<div class="wrap">
  <ul>
    <li><i class="fa fa-apple"></i></li>
    <li><i class="fa fa-android"></i></li>
  </ul>
</div>

Answer 4

To eliminate the presence of the other's .borderOverlay, simply remove it.

This can be achieved by utilizing $(this).siblings(), which will target all remaining li elements except for the one that was clicked on.

$("li").click(function () {
  if($(this).find('.borderOverlay').length) {
    $(this).find('.borderOverlay').remove();
  } else {
    $(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
    $(this).siblings().find('.borderOverlay').remove();
  }
});

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);

* {
  box-sizing: border-box;
}
body {
  font-family: 'Lato', sans-serif;
  background: #222;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: tomato;
  font-weight: 300;
  word-spacing: 14px;
  text-transform: uppercase;
}
.wrap {
  width: 400px;
  height: 300px;
  margin: 0px auto;
}
ul {
  margin: 0; 
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
}
ul li {
  display: block;
  width: 50%;
  height: 50%;
  line-height: 150px;
  font-size: 40px;
  color: #fff;
  text-align: center;
  float: left;
  position: relative;
}
.borderOverlay {
  width: 70%;
  height: 70%;
  background: rgba(255, 255, 255, .1);
  border: 3px solid tomato;
  border-radius: 10px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  animation: 0.25s enter;
}
.borderOverlay i {
  position: absolute;
  font-size: 29px;
  color: #222;
  top: -15px;
  right: -13px;
  background: #fff;
  padding: 1px;
  border-radius: 50%;
  animation: 0.75s enter2;
}

@keyframes enter {
  0% {
    transform: scale(0) rotate(-90deg);
  }

  100% {
     transform: scale(1);
  }
}
@keyframes enter2 {
    0% {
     transform: scale(0);
  }
  50% {
     transform: scale(0);
  }
  75% {
     transform: scale(1.25);
  }
  100% {
     transform: scale(1);
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

<h1>Device</h1>
<div class="wrap">
  <ul>
    <li><i class="fa fa-apple"></i></li>
    <li><i class="fa fa-android"></i></li>
  </ul>
</div>

Answer 5

Answer №3

It is important to use semantic HTML because there is a native element that serves this purpose - the input type="radio".

<h1>Device</h1>
<div class="wrap">
  <label>
    <input type="radio" class="myRadio" name="myRadio"/>
    <i class="fa fa-apple"></i>
    <div class="borderOverlay"></div>
  </label>
  <label>
    <input type="radio" class="myRadio" name="myRadio"/>
    <i class="fa fa-android"></i>
    <div class="borderOverlay"></div>
  </label>
</div>

Placing them within a label ensures that clicking anywhere within the label activates the radio button.
When one radio button is selected, all other radio buttons with the same 'name' attribute will be automatically updated.
This setup enables input from space/enter keys in addition to mouse clicks, unlike <button> elements.
Radio buttons can also be navigated and selected using keyboard controls (Tab Key), an essential accessibility feature often overlooked.

You can easily hide the actual radio buttons:

.wrap > label{
  position: relative;
}

.myRadio {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

You can style the radio buttons using pure CSS:

.myRadio:checked ~ .borderOverlay {
  /* rules for showing border overlay animation */
}

Handle changes on radio buttons effectively:

var radioButtons = Array.from(document.getElementsByClassName('myRadio'));

radioButtons.map(function(radio){
  radio.addEventListener('change', function(e){
    var selectedTarget = radioButtons.filter(btn => btn.checked)[0];
    // perform actions based on **selectedTarget**
  });
});

Answer 6

It is important to use semantic HTML because there is a native element that serves this purpose - the input type="radio".

<h1>Device</h1>
<div class="wrap">
  <label>
    <input type="radio" class="myRadio" name="myRadio"/>
    <i class="fa fa-apple"></i>
    <div class="borderOverlay"></div>
  </label>
  <label>
    <input type="radio" class="myRadio" name="myRadio"/>
    <i class="fa fa-android"></i>
    <div class="borderOverlay"></div>
  </label>
</div>

Placing them within a label ensures that clicking anywhere within the label activates the radio button.
When one radio button is selected, all other radio buttons with the same 'name' attribute will be automatically updated.
This setup enables input from space/enter keys in addition to mouse clicks, unlike <button> elements.
Radio buttons can also be navigated and selected using keyboard controls (Tab Key), an essential accessibility feature often overlooked.

You can easily hide the actual radio buttons:

.wrap > label{
  position: relative;
}

.myRadio {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

You can style the radio buttons using pure CSS:

.myRadio:checked ~ .borderOverlay {
  /* rules for showing border overlay animation */
}

Handle changes on radio buttons effectively:

var radioButtons = Array.from(document.getElementsByClassName('myRadio'));

radioButtons.map(function(radio){
  radio.addEventListener('change', function(e){
    var selectedTarget = radioButtons.filter(btn => btn.checked)[0];
    // perform actions based on **selectedTarget**
  });
});

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to use JQuery to target input nodes based on their values?

Caution: React detecting an active event listener on a scrolling-dependent 'touchstart' action

Having trouble with individuals gaining access to my gh-pages on Github

I'm keen on creating a marquee animation using Tailwind and Next.js

Executing a Function Prior to onClick Event of a Link Element in Next.js

The React Material UI table is having trouble stretching to fill the space

Difficulty viewing image in Firefox using HTML <img> tag

Simple guide to returning values from PHP using AJAX

Implementing a callback function following the completion of file reading in Phonegap

Which domain do I need to use: Google or my own, in order to bypass the Access Denied issue in JQuery

Using the fetch method to consume a RapidAPI JSON response

Understanding how to effectively conduct unit tests on the 'resolve' property within an Angular-UI Bootstrap Modal component is essential for ensuring the functionality and

Issue with ReactiveVar causing React component not to re-render

The comparison between installing a JavaScript library and simply copying .js files

My goal is to utilize CSS grid to craft a unique layout by establishing a grid area. However, the layout is not functioning as anticipated

Ways to dynamically incorporate media queries into an HTML element

Tips for updating multiple bundled javascript files with webpack

What reasons could lead to useSWR returning undefined even when fallbackData is provided?

Preventing navigation without using the <Prompt> component in React Router DOM V6

What is the solution for resolving the Next.js 14 next/link routing 404 error page problem?