1. 首頁
  2. 問答
  3. 包含HTML複選框列表的可滾動框

包含HTML複選框列表的可滾動框

2011-09-02 133 views
51

附加您會看到我爲所需的用戶界面所做的模擬圖片。正如你所看到的，我需要一些包含複選框的可滾動框。包含HTML複選框列表的可滾動框

enter image description here

我想到了一個可滾動的div的，雖然我不能找到一種方法來設置圍繞一個div邊界？其次，我想到了IFrame ..但也不太確定這是否是我最好的選擇。

有沒有人可能有這樣做更容易/更好的方式？

在此先感謝！

來源

2011-09-02 Tiwaz89

回答

99

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>

如何看起來：

design

這是你在找什麼？

來源

2011-09-02 07:38:45 Samich

+1

完美！謝謝薩米奇，這正是我所期待的。 – Tiwaz89

-2

如果u有阿雷然後在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

來源

2015-02-05 07:32:03 Khan

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

來源

2015-04-28 08:58:25

+1

這工作得很好。謝啦 – 2016-02-15 08:49:24

1

使用此功能的變體：

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.

來源

2017-04-06 16:42:15 jpussacq

0 

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.

來源

2017-04-17 12:45:59 dfdf

相關問題

 相關問題