Hộp cuộn có chứa danh sách Hộp kiểm trong HTML

Đính kèm bạn sẽ thấy một hình ảnh mô phỏng tôi đã làm cho giao diện người dùng được yêu cầu. Như bạn có thể thấy tôi cần một số loại hộp cuộn có chứa hộp kiểm.Hộp cuộn có chứa danh sách Hộp kiểm trong HTML

enter image description here

Tôi đã nghĩ đến một div cuộn, mặc dù tôi không thể tìm thấy một cách để thiết lập một đường viền bao quanh một div? Thứ hai tôi nghĩ về một IFrame .. Nhưng cũng không quá chắc chắn nếu đây là lựa chọn tốt nhất của tôi.

Có ai có thể có cách làm tốt hơn hay dễ hơn không?

Cảm ơn trước!

Nguồn

2011-09-02 Tiwaz89

CSS:

.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }

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>

Làm thế nào nó trông giống:

design

Đây có phải là những gì bạn đang tìm kiếm?

Nguồn

2011-09-02 07:38:45 Samich

Perfect! Cảm ơn Samich, đây chính xác là những gì tôi đang tìm kiếm. – Tiwaz89

-2

nếu u đã aray sau đó sử dụng chức năng này trong 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

Nguồn

2015-02-05 07:32:03 Khan

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

Nguồn

2015-04-28 08:58:25

hoạt động rất tốt. cảm ơn người đàn ông –

Một biến thể:

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.

Nguồn

2017-04-06 16:42:15 jpussacq

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.

Nguồn

2017-04-17 12:45:59 dfdf

Hộp cuộn có chứa danh sách Hộp kiểm trong HTML

Trả lời

Các vấn đề liên quan