如何使用CSS和JS编写的多选代码仅选择一个选项？ 目前，我可以同时选择

Question

我在这里遇到了一些麻烦，并且我相信这很容易解决。 我对Javascript经验不足，并且正在尝试学习如何编写外观更好的网站。

基本上，我使用此代码来选择iOS或Android，但是我希望只能选择其中一个。 相反，我可以同时选择两者。 有人可以帮忙解释一下如何选择一个或另一个吗？ 优选地，当选择一个时，如果另一个已经被选择，则它自动地取消选择另一个。 我将非常感谢您的帮助！ 非常感谢你。

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

您只需要删除对方的.borderOverlay 。

您可以通过使用$(this).siblings()来执行$(this).siblings() ，这将选择除单击的那个以外的所有其他li 。

 $("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

语义HTML是一件事是有原因的-有一个元素本身可以做到这一点-输入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>

• 我们将它们放在标签内，因此单击标签内的任何位置都会触发广播。
• 按下某个收音机时，所有其他具有相同“名称”的收音机将被更新。
• 这也将接受来自空格/输入的输入，而不仅仅是单击（与<button>元素一样）。 只需添加一个“ click” eventListener也将适用于这些键。
• 并且还可以通过键盘导航（使用Tab键）进行聚焦，这非常重要，但忽略太多。

---

您可以轻松隐藏实际的按钮：

.wrap > label{
  position: relative;
}

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

并直接使用纯CSS设置样式：

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

---

并在发生更改时循环播放它们：

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