包含 HTML 中复选框列表的可滚动框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7280389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 10:24:31 来源:igfitidea点击:
Scrollable box containing list of Checkboxes in HTML
提问by Samich
Attached you'll see a picture of a mock up I did for the required UI. As you can see I need some type of scrollable box that contains checkboxes.
在附件中，您将看到一张我为所需 UI 制作的模型图片。如您所见，我需要某种类型的包含复选框的可滚动框。
I've thought of a scrollable div, although I can't find a way to set a border around a div? Second I thought of an IFrame.. But also not too sure if this is my best option.
我想到了一个可滚动的 div，虽然我找不到在 div 周围设置边框的方法？其次，我想到了 IFrame .. 但也不太确定这是否是我的最佳选择。
Does anybody perhaps have an easier/better way of doing this?
有没有人可能有更简单/更好的方法来做到这一点？
Thanks in advance!
提前致谢！
回答by Samich
CSS:
CSS：
.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }
HTML:
HTML：
<div class="container">
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
</div>
How it looks:
它的外观：
Is this what you are looking for?
这是你想要的？
回答by Hüseyin Sekmeno?lu
<style type="text/css">
select, ul { height: 100px; overflow: auto; width: 100px; border: 1px solid #000; }
ul { list-style-type: none; margin: 0; padding: 0; overflow-x: hidden; }
li { margin: 0; padding: 0; }
label { display: block; color: WindowText; background-color: Window; margin: 0; padding: 0; width: 100%; }
label:hover { background-color: Highlight; color: HighlightText; }
</style>
<ul>
<li><label for="chk1"><input type="checkbox" name="chk1" id="chk1">First</label></li>
<li><label for="chk2"><input type="checkbox" name="chk2" id="chk2">Second</label></li>
<li><label for="chk3"><input type="checkbox" name="chk3" id="chk3">Third</label></li>
<li><label for="chk4"><input type="checkbox" name="chk4" id="chk4">Fourth</label></li>
<li><label for="chk5"><input type="checkbox" name="chk5" id="chk5">Fifth</label></li>
<li><label for="chk6"><input type="checkbox" name="chk6" id="chk6">Sixth</label></li>
<li><label for="chk7"><input type="checkbox" name="chk7" id="chk7">Seventh</label></li>
</ul>
http://krijnhoetmer.nl/stuff/html/select-multiple-checkbox-list/
http://krijnhoetmer.nl/stuff/html/select-multiple-checkbox-list/
回答by jpussacq
A variant:
一个变体：
function obtenerSeleccionados() {
var seleccionados = [];
$('.contenedor input:checked').each(function() {
seleccionados.push($(this).attr('id'));
});
alert(seleccionados);
}.contenedor {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
position: fixed;
background: white;
margin-top: 2px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
Hito:
<input id='btnAbrirFiltro' type="button" value="Filtro múltiple" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();">
<input id='btnCerrarFiltro' type="button" value="Cerrar" style="display: none;" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();">
<input id='btnFiltrar' type="button" value="Filtrar" style="display: none;" onclick="obtenerSeleccionados()">
<div class="contenedor" style="display: none;">
<input id="cfh_1" type="checkbox" /> Hito 1
<br />
<input id="cfh_2" type="checkbox" /> Hito 2
<br />
<input id="cfh_3" type="checkbox" /> Hito 3
<br />
<input id="cfh_4" type="checkbox" /> Hito 4
<br />
<input id="cfh_5" type="checkbox" /> Hito 5
<br />
<input id="cfh_7" type="checkbox" /> Hito 6
<br />
<input id="cfh_8" type="checkbox" /> Hito 7
<br />
<input id="cfh_4567" type="checkbox" /> Hito 8
<br />
<input id="cfh_345" type="checkbox" /> Hito Implementación final del evento
<br />
<input id="cfh_45671" type="checkbox" /> Hito a8
<br />
<input id="cfh_45672" type="checkbox" /> Hito s8
<br />
<input id="cfh_45673" type="checkbox" /> Hito d8
<br />
<input id="cfh_45674" type="checkbox" /> Hito f8
<br />
<input id="cfh_45675" type="checkbox" /> Hito g8
<br />
</div>
</div>
Lorem ipsum dolor sit amet, libero nullam dolor, auctor consequat. Risus donec nunc nulla maecenas, at mattis, arcu tempor. Faucibus velit vitae arcu mauris, sem blandit elementum. Conubia pede interdum urna suspendisse eget. Vestibulum malesuada amet
ac vel ligula, leo aenean, ac ultrices nec class, consectetuer adipiscing massa in sint morbi justo, sit maecenas a sit. Enim molestie, porta enim, dolor suscipit sagittis, donec ornare sed aenean aliquet parturient blandit. Quisque nisl tempus arcu lobortis
massa quis, pede praesent nulla et eget sed, facilisi nunc elit erat. Volutpat mauris pellentesque magna aliquam dolor facilisi. Nec orci, nunc imperdiet feugiat. Erat est vestibulum nec et, eu eros tempus morbi netus, congue pellentesque vivamus, tellus
eleifend maecenas mus sodales blandit et, sed vulputate rhoncus lobortis amet id inceptos. Magna vestibulum elit vel aenean, aliquam praesent vestibulum sed fringilla amet volutpat, cras mauris suscipit pretium.回答by dfdf
function obtenerSeleccionados() {
var seleccionados = [];
$('.contenedor input:checked').each(function() {
seleccionados.push($(this).attr('id'));
});
alert(seleccionados);
}.contenedor {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
position: fixed;
background: white;
margin-top: 2px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
Hito:
<input id='btnAbrirFiltro' type="button" value="Filtro múltiple" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();">
<input id='btnCerrarFiltro' type="button" value="Cerrar" style="display: none;" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();">
<input id='btnFiltrar' type="button" value="Filtrar" style="display: none;" onclick="obtenerSeleccionados()">
<div class="contenedor" style="display: none;">
<input id="cfh_1" type="checkbox" /> Hito 1
<br />
<input id="cfh_2" type="checkbox" /> Hito 2
<br />
<input id="cfh_3" type="checkbox" /> Hito 3
<br />
<input id="cfh_4" type="checkbox" /> Hito 4
<br />
<input id="cfh_5" type="checkbox" /> Hito 5
<br />
<input id="cfh_7" type="checkbox" /> Hito 6
<br />
<input id="cfh_8" type="checkbox" /> Hito 7
<br />
<input id="cfh_4567" type="checkbox" /> Hito 8
<br />
<input id="cfh_345" type="checkbox" /> Hito Implementación final del evento
<br />
<input id="cfh_45671" type="checkbox" /> Hito a8
<br />
<input id="cfh_45672" type="checkbox" /> Hito s8
<br />
<input id="cfh_45673" type="checkbox" /> Hito d8
<br />
<input id="cfh_45674" type="checkbox" /> Hito f8
<br />
<input id="cfh_45675" type="checkbox" /> Hito g8
<br />
</div>
</div>
Lorem ipsum dolor sit amet, libero nullam dolor, auctor consequat. Risus donec nunc nulla maecenas, at mattis, arcu tempor. Faucibus velit vitae arcu mauris, sem blandit elementum. Conubia pede interdum urna suspendisse eget. Vestibulum malesuada amet
ac vel ligula, leo aenean, ac ultrices nec class, consectetuer adipiscing massa in sint morbi justo, sit maecenas a sit. Enim molestie, porta enim, dolor suscipit sagittis, donec ornare sed aenean aliquet parturient blandit. Quisque nisl tempus arcu lobortis
massa quis, pede praesent nulla et eget sed, facilisi nunc elit erat. Volutpat mauris pellentesque magna aliquam dolor facilisi. Nec orci, nunc imperdiet feugiat. Erat est vestibulum nec et, eu eros tempus morbi netus, congue pellentesque vivamus, tellus
eleifend maecenas mus sodales blandit et, sed vulputate rhoncus lobortis amet id inceptos. Magna vestibulum elit vel aenean, aliquam praesent vestibulum sed fringilla amet volutpat, cras mauris suscipit pretium.function obtenerSeleccionados() {
var seleccionados = [];
$('.contenedor input:checked').each(function() {
seleccionados.push($(this).attr('id'));
});
alert(seleccionados);
}.contenedor {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
position: fixed;
background: white;
margin-top: 2px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
Hito:
<input id='btnAbrirFiltro' type="button" value="Filtro múltiple" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();">
<input id='btnCerrarFiltro' type="button" value="Cerrar" style="display: none;" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();">
<input id='btnFiltrar' type="button" value="Filtrar" style="display: none;" onclick="obtenerSeleccionados()">
<div class="contenedor" style="display: none;">
<input id="cfh_1" type="checkbox" /> Hito 1
<br />
<input id="cfh_2" type="checkbox" /> Hito 2
<br />
<input id="cfh_3" type="checkbox" /> Hito 3
<br />
<input id="cfh_4" type="checkbox" /> Hito 4
<br />
<input id="cfh_5" type="checkbox" /> Hito 5
<br />
<input id="cfh_7" type="checkbox" /> Hito 6
<br />
<input id="cfh_8" type="checkbox" /> Hito 7
<br />
<input id="cfh_4567" type="checkbox" /> Hito 8
<br />
<input id="cfh_345" type="checkbox" /> Hito Implementación final del evento
<br />
<input id="cfh_45671" type="checkbox" /> Hito a8
<br />
<input id="cfh_45672" type="checkbox" /> Hito s8
<br />
<input id="cfh_45673" type="checkbox" /> Hito d8
<br />
<input id="cfh_45674" type="checkbox" /> Hito f8
<br />
<input id="cfh_45675" type="checkbox" /> Hito g8
<br />
</div>
</div>
Lorem ipsum dolor sit amet, libero nullam dolor, auctor consequat. Risus donec nunc nulla maecenas, at mattis, arcu tempor. Faucibus velit vitae arcu mauris, sem blandit elementum. Conubia pede interdum urna suspendisse eget. Vestibulum malesuada amet
ac vel ligula, leo aenean, ac ultrices nec class, consectetuer adipiscing massa in sint morbi justo, sit maecenas a sit. Enim molestie, porta enim, dolor suscipit sagittis, donec ornare sed aenean aliquet parturient blandit. Quisque nisl tempus arcu lobortis
massa quis, pede praesent nulla et eget sed, facilisi nunc elit erat. Volutpat mauris pellentesque magna aliquam dolor facilisi. Nec orci, nunc imperdiet feugiat. Erat est vestibulum nec et, eu eros tempus morbi netus, congue pellentesque vivamus, tellus
eleifend maecenas mus sodales blandit et, sed vulputate rhoncus lobortis amet id inceptos. Magna vestibulum elit vel aenean, aliquam praesent vestibulum sed fringilla amet volutpat, cras mauris suscipit pretium.回答by Khan
if u have aray then use this function in PHP
如果你有 aray 然后在 PHP 中使用这个函数
function addOCheckBoxValuesByArray($arr) {
foreach ($arr as $key => $value) {
echo"<input type= 'checkbox' name='formBylist[]' value='$value' />$value<br />";
}
}
below code access data after user press submit button
if(isset($_POST['formBylist']))
{
$selectedDataBylist = $_POST['formBylist'];
if(!isset($selectedDataBylist))
{ // is data not selected
echo "You didn't select data from below checkbox Table";
}
else
{ // data is user selected
$Cnt = count($selectedDataBylist);
for($i=0; $i < $Cnt; $i++)
{
$result =$selectedDataBylist[$i]);
}
}
enter code here
}
to put all check boxes in scroll bar - use CSS
<html lang="en">
<head>
<style>
.container { border:2px solid #ccc; width:400px; height: 500px; overflow-y: scroll; }
</style>
</head>
///
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<div class="container">
addOCheckBoxValuesByArray($chekboxarray);?>
</div>
enter code here
