I'm creating a page that serves as an attendance sheet, my intention is that the user slides a toggle button so that later those results are stored in an array, but when I try to create the button it doesn't work for me and I just have a checkbox with nothing what is my mistake? I would be very grateful to anyone who can help me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Asistencia - Escuelas Newton</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-toggle-master/css/bootstrap-toggle.min.css">
<link rel="stylesheet" type="text/css" href="js/bootstrap.js">
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.js">
<link rel="stylesheet" type="text/css" href="bootstrap-toggle-master/js/bootstrap-toggle.min.js">
<script src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="Estilo.css">
<link rel="icon" type="text/css" href="Imagenes/icon.jpg">
</head>
<body background="Imagenes/Logox3.jpg" style="background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%" class="col-xs-12 col-sm-10 col-md-6 col-lg-4">
<header>
<div class="col-xs-12 col-sm-10 col-md-6 col-lg-4">
<hgroup>
<img src="Imagenes/logo3.png" style="background-attachment: fixed">
<h2 style="text-shadow: 1px 1px 2px black;;">Planilla de asistencias</h2>
</hgroup>
</div>
<div class="col-xs-12 col-sm-10 col-md-6 col-lg-4" style="margin-right:
7px">
<div align="right">
<button class="btn btn-info">Ajustes</button>
<button class="btn btn-danger">Salir</button>
</div>
</div>
</header>
<div class="container">
<div class="col-xs-12 col-sm-10 col-md-6 col-lg-4">
<div class="main-row">
<div class="table-responsive">
<table class="table" >
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Alumno</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td><input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td><input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td><input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-10 col-md-6 col-lg-4">
<button class="btn btn-success" style="margin: 3px;" onclick="guardarasistencia();">Guardar</button>
<strong><p class="help-block" style="color: blue; font-size: 16px; margin: 10px;">ATENCION: Asegurese de verificar los datos antes de guardar, una vez hecho click en el boton no podran ser modificados.</p></strong>
</div>
</div>
</body>
</html>
All javascript libraries put them like this:
you put them wrong, they are like this:
except jquery