How do I make my multiple choice code written in CSS & JS to only select one option? Currently I can select both

Question

I am having a bit of trouble here, and I am sure this is an easy fix. I am very inexperienced in Javascript & I am trying to learn how to code better looking sites.

Basically I am using this code for selecting iOS or Android, but I want to be able to only select one or the other. Instead I am able to select both. Could someone please help explain how to select either one or the other? Preferably when selecting one it automatically deselects the other if the other is already selected. I would really appreciate help! Thank you very much.

https://codepen.io/cmpackagingllc/pen/JVLPjq

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>');
  }
});

Answer 1

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

Answer 2

You just have to remove the other's .borderOverlay .

You can do that by using $(this).siblings() and this will select all other li except 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 3

There is a reason semantic HTML is a thing - there is an element that does this natively - 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>

• We place them within a label, so clicking anywhere within the label triggers the radio.
• When a radio is pressed, all other radios with the same 'name' will be updated.
• This will also accept input from space/enter not only click (as do <button> elements). Simply adding an 'click' eventListener will also apply for these keys.
• And are also focusable by keyboard navigation (using the Tab Key), which is quite important but gets omitted way too much.

---

You can easily hide the actual buttons:

.wrap > label{
  position: relative;
}

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

And also style them directly with pure CSS:

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

---

And loop them when a change occurs:

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

radioButtons.map(function(radio){
  radio.addEventListener('change', function(e){
    var selectedTarget = radioButtons.filter(btn => btn.checked)[0];
    // do something with **selectedTarget**
  };
});