我正在处理一个代码,checkbox
我希望在按下保存按钮时将哪些框处于活动或非活动状态的结果显示在浏览器控制台中或存储在一个数组中,以便我以后可以使用它们。我到目前为止的代码是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulario</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="Estilo.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="divcontenedor">
<div class="row">
<div class="col-md-12">
<div class="tipotex size30 center">Por favor Marque la opcion/opciones deseada:</div>
</div>
</div>
<form >
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<p class="tipotex size12">Opcion 1</p>
</div>
<div class="col-md-4">
Estado: <input type="checkbox" id="micheck0" name="micheck">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<p class="tipotex size12">Opcion 2</p>
</div>
<div class="col-md-4">
Estado: <input type="checkbox" id="micheck1" name="micheck">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<p class="tipotex size12">Opcion 3</p>
</div>
<div class="col-md-4">
Estado: <input type="checkbox" id="micheck2" name="micheck">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<p class="tipotex size12">Opcion 4</p>
</div>
<div class="col-md-4">
Estado: <input type="checkbox" id="micheck3" name="micheck">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<p class="tipotex size12">Opcion 5</p>
</div>
<div class="col-md-4">
Estado: <input type="checkbox" id="micheck4" name="micheck">
</div>
</div>
</li>
</ul>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" onclick="guardar()">Guardar</button>
</form>
</div>
<script src="js/func.js"></script>
</body>
</html>
我将提供两种选择,一种使用 jQuery,另一种使用纯 Javascript。
jQuery
一种可能性是使用
map
jQuery:纯 JavaScript
您可以使用
querySelectorAll
(不适用于旧浏览器)。与以下版本的兼容性:
参考原始答案,您可以使用jQuery.map()
checkboxes
,它为选定的数组创建一个数组。对于 JS 纯粹主义者:
Javascript(jQuery 1.6+):
Para obtener otro valor que no sea el
value
, por ejemplo obtener elid
, reemplaza esta sección:重用我刚刚回答的另一个问题的代码:
并更详细地回答您的问题:
如果选中,我会逐一检查表格的所有复选框。如果是这样,我收集它的值并将其插入到一个数组中。
在 Javascript 中,您可以通过以下方式检查复选框的状态:
如果选择它将返回
true
,否则将返回false
。拥有您的值,
checkbox
您可以以最适合您的方式将它们放入数组中。