<li> with onlick (switch/checkbox) function

Question

I have this rectangle in <li> format and wanted it when I clicked on the rectangle that would turn the switch on / off. How is it done with 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>

My code:

.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

I see you using switch from w3school. You have one label for decoration .switch, now you need an actual label to click on. Wrap content of li in label and move the class list-group-item from li to that label.

.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>