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