时间戳

首页 > 解决方案 > HTML 多选框，无 Ctrl 键单击要求

javascript - HTML 多选框，无 Ctrl 键单击要求

问题描述

（在将其作为此类性质的各种其他问题的副本或已被回答之前，请仔细阅读。）

我想让我的 HTML5 多选选项，这样他们就不需要按住 Ctrl 来选择/取消选择它们而不影响其他选项。（这是针对我多年来一直在开发的 Perl Web 应用程序，最近有人要求我使多个选择框更不容易发生意外，即用户（其中​​一些年纪很大）丢失所有其他选择的选项当他们点击一个时，可能没有注意到。）

在花了几个小时测试我在网上找到的各种解决方案之后，我还没有找到任何我想要的解决方案，即：

  1. 我不想使用 jQuery，因为我在这个应用程序中还不需要它，我想尽可能保持精简（W3Schools 说“在 JavaScript 版本 5（2009）之后，大多数 jQuery 实用程序都可以用几行标准的 JavaScript 就可以解决")。
  2. 使用简单的 HTML 多选控件，无需（或最少）更改 HTML 标记。
  3. 任何禁用<option>的 s（可能在页面加载时预先选择）不应通过单击它们（或单击任何其他选项）来选择/不可选择。
  4. 单击选项不应导致选项列表自动滚动，某些解决方案会发生这种情况。
  5. 选定的选项至少应在 Chrome 中以传统的蓝色（或类似的 - 非灰色）显示。
  6. 至少在 Chrome 中，即使在单击选择框之前，选定的项目也应该（最好）是蓝色的。（默认情况下，Firefox 中的传统多选​​选项会发生这种情况，但 Chrome 不会。）

我一直在寻找的解决方案之一是如何避免使用 Javascript 在多选框中进行 ctrl-click 的需要？（在该页面上的其他内容中）它是 Fiddle（http://jsfiddle.net/xQqbR/1022）。这是一个好的开始，但不能满足我的要求 1、3 和 6。我看到各种评论者已经指出（以及如何）不应该需要 jQuery，但是在尝试了他们的建议之后我不能让它工作，我几乎不知道任何 JavaScript 可以自己解决这个问题。

这是我正在处理的标记类型：

<select multiple size=3>
  <option>Option 1</option>
  <option>Option 2</option>
  <option disabled>Option 3 (disabled)</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option selected>Option 7 (selected)</option>
  <option disabled selected>Option 8 (disabled+selected)</option>
</select>

提前感谢您的时间和专业知识。

标签： javascripthtmlcssselect

解决方案

var expanded = false;
function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
#select22 {
	border-radius: 4px;
	width: 100%;
     height: 30px;
	color: white;
    padding-bottom: 2px;
        background-color: #00ced1;
         border: 1px solid #00ced1;
      border-bottom: 0.5px solid white;
	/* Here's the code we need */
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	 -o-appearance: none;
		appearance: none;
}
.select-wrapper22:after {
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 20px;
  	position: absolute;
  	top: 6px;
  	right: 4px;
  	color: white;
  	pointer-events: none;
}
.select-wrapper22:after:hover{
    font-family: FontAwesome;
  	content: '\f107';
  	font-size: 20px;
  	position: absolute;
  	top: 6px;
  	right: 4px;
  	color: #00ced1;
  	pointer-events: none;
}
.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


#checkboxes {
    display: none;
    border: 1px #7e7e7e solid;
    background-color: white;
    padding-top: 10px;
}

#checkboxes label::before {
    display: block;
    font-family: Aller Light;
    background-color: white;
    color: #7e7e7e;
}

#checkboxes label::after {
    display: block;
    font-family: Aller Light;
    background-color: white;
    color: aqua;
}

#checkboxes label:hover {
    color: #00ced1;
}

#checkboxes label::after {
    color: #00ced1;
}
.cotner {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.cotner input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


.chmk {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
}


.chmk:after {
    content: "";
    position: absolute;
    display: none;
}


.cotner input:checked ~ .chmk:after {
    display: block;
    color: aqua;
}


.cotner .chmk:after {
    left: 9px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #00ced1;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

input[type=checkbox]:checked + label {
    color: red
}
 <div>
                        <p class="sideheadingdrop">Hard Skills<i style="" class="fa fa-exclamation-circle"></i></p>
                        <div  class="select-wrapper22" onclick="showCheckboxes()">
      <select id="select22" >
        <option value="" disabled selected hidden></option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one" class="cotner">
        <input type="checkbox" id="one" />
          <span class="chmk"></span>First checkbox</label>
      <label for="two" class="cotner">
        <input type="checkbox" id="two" />
          <span class="chmk"></span>Second checkbox</label>
      <label for="three" class="cotner">
        <input type="checkbox" id="three" />
          <span class="chmk"></span>Third checkbox</label>
    </div>
                    </div>

我在不使用 ctrl 的情况下创建了多个复选框。

推荐阅读