javascript - <li> 具有 onclick(开关/复选框)功能

Question

我在<li>中有这个矩形格式，并在我单击打开/关闭开关的矩形时需要它。这是如何用 JavaScript 完成的？

<ul class="list-group list-group-flush">
    <li class="list-group-item">
    <i class="icon icon-info"></i>
    Informação Geral
    <label class="labl switch">
    <input type="checkbox" class="primary" value="GeneralInformation" checked="checked" />
    <span class="slider round"></span>
</label>
</li>

我的代码:

.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 26px;
  float: right;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 2px;
  background-color: #333;
  -webkit-transition: .4s;
  transition: .4s;
}

input.default:checked+.slider {
  background-color: #00adef;
}

input.primary:checked+.slider {
  background-color: #00adef;
}

input.success:checked+.slider {
  background-color: #00adef;
}

input.info:checked+.slider {
  background-color: #00adef;
}

input.warning:checked+.slider {
  background-color: #00adef;
}

input.danger:checked+.slider {
  background-color: #00adef;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.list-group-item {
  background-color: #ececec !important;
  border: 5px solid rgb(255, 255, 255) !important;
  border-radius: 0px !important;
}

.card {
  border: 0px !important;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="botoes_selecao">
  <div class="card icon-package-flat">
    <!-- Default panel contents -->

    <ul class="list-group list-group-flush">

      <li class="list-group-item" onclick=toggleButton(idGeneralInformation)>
        <i class="icon icon-info"></i> Information
        <label class="labl switch">
                                             <input type="checkbox" class="primary" value="GeneralInformation" checked="checked" />
                                             <span class="slider round"></span>
                                         </label>
      </li>

      <li class="list-group-item" onclick=toggleButton(idGeneralInformation)>
        <i class="icon icon-info"></i> Information 2
        <label class="labl switch">
                                             <input type="checkbox" class="primary" value="GeneralInformation" checked="checked" />
                                             <span class="slider round"></span>
                                         </label>
      </li>



    </ul>
  </div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

我看到你使用的是 w3school 的 switch。您有一个用于装饰的标签 .switch，现在您需要一个实际的标签来单击。将 li 的内容包装在标签中，并将类 list-group-item 从 li 移动到该标签。

.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 26px;
  float: right;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 2px;
  background-color: #333;
  -webkit-transition: .4s;
  transition: .4s;
}

input.default:checked+.slider {
  background-color: #00adef;
}

input.primary:checked+.slider {
  background-color: #00adef;
}

input.success:checked+.slider {
  background-color: #00adef;
}

input.info:checked+.slider {
  background-color: #00adef;
}

input.warning:checked+.slider {
  background-color: #00adef;
}

input.danger:checked+.slider {
  background-color: #00adef;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.list-group-item {
  background-color: #ececec !important;
  border: 5px solid rgb(255, 255, 255) !important;
  border-radius: 0px !important;
}

.card {
  border: 0px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="botoes_selecao">
  <div class="card icon-package-flat">
    <!-- Default panel contents -->

    <ul class="list-group list-group-flush">

      <li>

        <label class="list-group-item">
      
        <i class="icon icon-info"></i> Information
        <label class="labl switch">
                                             <input type="checkbox" class="primary" value="GeneralInformation" checked="checked" />
                                             <span class="slider round"></span>
                                         </label>

        </label>

      </li>

      <li>

        <label class="list-group-item">
      
        <i class="icon icon-info"></i> Information 2
        <label class="labl switch">
                                             <input type="checkbox" class="primary" value="GeneralInformation" checked="checked" />
                                             <span class="slider round"></span>
                                         </label>

        </label>

      </li>



    </ul>
  </div>
</div>