blocks|key|576758|text|CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|576759|.container+{+border:2px+solid+#ccc;+width:300px;+height:+100px;+overflow-y:+scroll;+}|code-block|syntax|javascript|576760|HTML：|576761|<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>|576762|它看起来怎么样：|576763|​|576764|📷|atomic|offset|length|576765|576766|这就是你要找的东西吗？|576767|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1faaf00f9d756c8b0880e901168a1616.png|imageAlt^0|0|0|0|0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|19|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1B|8|@]|9|@$R|1C|S|1D|1|1E]]|A|$]]|$1|T|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1G|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]]]

<p>CSS:</p>

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

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
    &lt;input type="checkbox" /&gt; This is checkbox &lt;br /&gt;
&lt;/div&gt;
</code></pre>

<p>How it looks:</p>

<p><img src="https://i.stack.imgur.com/iX21J.png" alt="design"></p>

<p>Is this what you are looking for?</p>


blocks|key|793023|text|如果您已经使用过此函数，请在PHP中使用此函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793024|++++++++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%2B%2B)
++++++++++++++++{+++++++++++
++++++++++++++++$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|code-block|syntax|javascript|793025|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>if u have aray then use this function in PHP</p>

<pre><code>        function addOCheckBoxValuesByArray($arr) {      
                foreach ($arr as $key =&gt; $value) {
                echo"&lt;input type= 'checkbox' name='formBylist[]' value='$value' /&gt;$value&lt;br /&gt;";
                }

        }



    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 &lt; $Cnt; $i++)
                {           
                $result =$selectedDataBylist[$i]);

                    }
    }
    enter code here

}



to put all check boxes in scroll bar - use CSS 

&lt;html lang="en"&gt;
&lt;head&gt;
&lt;style&gt;
.container { border:2px solid #ccc; width:400px; height: 500px; overflow-y: scroll; } 
&lt;/style&gt;
&lt;/head&gt;



///
&lt;form action="&lt;?php echo htmlentities($_SERVER['PHP_SELF']); ?&gt;" method="post"&gt;         
                &lt;div class="container"&gt;             
                                   addOCheckBoxValuesByArray($chekboxarray);?&gt;
                &lt;/div&gt;




    enter code here
</code></pre>


blocks|key|793030|text|<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%25;+}
+++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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|793031|http://krijnhoetmer.nl/stuff/html/select-multiple-checkbox-list/|unstyled|offset|length|793032|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1S|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Q|8|@]|9|@$G|R|H|S|1|T]]|A|$]]|$1|I|3|-4|5|F|7|U|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|E]]]]

<pre><code>&lt;style type="text/css"&gt;
   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; }
  &lt;/style&gt;
&lt;ul&gt;
   &lt;li&gt;&lt;label for="chk1"&gt;&lt;input type="checkbox" name="chk1" id="chk1"&gt;First&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label for="chk2"&gt;&lt;input type="checkbox" name="chk2" id="chk2"&gt;Second&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label for="chk3"&gt;&lt;input type="checkbox" name="chk3" id="chk3"&gt;Third&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label for="chk4"&gt;&lt;input type="checkbox" name="chk4" id="chk4"&gt;Fourth&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label for="chk5"&gt;&lt;input type="checkbox" name="chk5" id="chk5"&gt;Fifth&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label for="chk6"&gt;&lt;input type="checkbox" name="chk6" id="chk6"&gt;Sixth&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label for="chk7"&gt;&lt;input type="checkbox" name="chk7" id="chk7"&gt;Seventh&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
</code></pre>

<p><a href="http://krijnhoetmer.nl/stuff/html/select-multiple-checkbox-list/" rel="noreferrer">http://krijnhoetmer.nl/stuff/html/select-multiple-checkbox-list/</a></p>


blocks|key|793044|text|一种变体：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793045|​|793046|function+obtenerSeleccionados()+{
++var+seleccionados+=+[];
++$('.contenedor+input:checked').each(function()+{
++++seleccionados.push($(this).attr('id'));
++});
++alert(seleccionados);
}|code-block|syntax|javascript|793047|.contenedor+{
++border:+1px+solid+grey;
++width:+200px;
++height:+200px;
++overflow-y:+scroll;
++position:+fixed;
++background:+white;
++margin-top:+2px;
}|793048|<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.|793049|793050|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>A variant:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function obtenerSeleccionados() {
  var seleccionados = [];
  $('.contenedor input:checked').each(function() {
    seleccionados.push($(this).attr('id'));
  });
  alert(seleccionados);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.contenedor {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  position: fixed;
  background: white;
  margin-top: 2px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div&gt;

  Hito:

  &lt;input id='btnAbrirFiltro' type="button" value="Filtro múltiple" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();"&gt;

  &lt;input id='btnCerrarFiltro' type="button" value="Cerrar" style="display: none;" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();"&gt;

  &lt;input id='btnFiltrar' type="button" value="Filtrar" style="display: none;" onclick="obtenerSeleccionados()"&gt;

  &lt;div class="contenedor" style="display: none;"&gt;
    &lt;input id="cfh_1" type="checkbox" /&gt; Hito 1
    &lt;br /&gt;
    &lt;input id="cfh_2" type="checkbox" /&gt; Hito 2
    &lt;br /&gt;
    &lt;input id="cfh_3" type="checkbox" /&gt; Hito 3
    &lt;br /&gt;
    &lt;input id="cfh_4" type="checkbox" /&gt; Hito 4
    &lt;br /&gt;
    &lt;input id="cfh_5" type="checkbox" /&gt; Hito 5
    &lt;br /&gt;
    &lt;input id="cfh_7" type="checkbox" /&gt; Hito 6
    &lt;br /&gt;
    &lt;input id="cfh_8" type="checkbox" /&gt; Hito 7
    &lt;br /&gt;
    &lt;input id="cfh_4567" type="checkbox" /&gt; Hito 8
    &lt;br /&gt;
    &lt;input id="cfh_345" type="checkbox" /&gt; Hito Implementación final del evento
    &lt;br /&gt;
    &lt;input id="cfh_45671" type="checkbox" /&gt; Hito a8
    &lt;br /&gt;
    &lt;input id="cfh_45672" type="checkbox" /&gt; Hito s8
    &lt;br /&gt;
    &lt;input id="cfh_45673" type="checkbox" /&gt; Hito d8
    &lt;br /&gt;
    &lt;input id="cfh_45674" type="checkbox" /&gt; Hito f8
    &lt;br /&gt;
    &lt;input id="cfh_45675" type="checkbox" /&gt; Hito g8
    &lt;br /&gt;
  &lt;/div&gt;

&lt;/div&gt;

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.</code></pre>
</div>
</div>
</p>


blocks|key|576862|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|576863|function+obtenerSeleccionados()+{
++var+seleccionados+=+[];
++$('.contenedor+input:checked').each(function()+{
++++seleccionados.push($(this).attr('id'));
++});
++alert(seleccionados);
}|code-block|syntax|javascript|576864|.contenedor+{
++border:+1px+solid+grey;
++width:+200px;
++height:+200px;
++overflow-y:+scroll;
++position:+fixed;
++background:+white;
++margin-top:+2px;
}|576865|<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.|576866|576867|576868|function+obtenerSeleccionados()+{
++var+seleccionados+=+[];
++$('.contenedor+input:checked').each(function()+{
++++seleccionados.push($(this).attr('id'));
++});
++alert(seleccionados);
}|576869|.contenedor+{
++border:+1px+solid+grey;
++width:+200px;
++height:+200px;
++overflow-y:+scroll;
++position:+fixed;
++background:+white;
++margin-top:+2px;
}|576870|<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.|576871|576872|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|U|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function obtenerSeleccionados() {
  var seleccionados = [];
  $('.contenedor input:checked').each(function() {
    seleccionados.push($(this).attr('id'));
  });
  alert(seleccionados);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.contenedor {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  position: fixed;
  background: white;
  margin-top: 2px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div&gt;

  Hito:

  &lt;input id='btnAbrirFiltro' type="button" value="Filtro múltiple" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();"&gt;

  &lt;input id='btnCerrarFiltro' type="button" value="Cerrar" style="display: none;" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();"&gt;

  &lt;input id='btnFiltrar' type="button" value="Filtrar" style="display: none;" onclick="obtenerSeleccionados()"&gt;

  &lt;div class="contenedor" style="display: none;"&gt;
    &lt;input id="cfh_1" type="checkbox" /&gt; Hito 1
    &lt;br /&gt;
    &lt;input id="cfh_2" type="checkbox" /&gt; Hito 2
    &lt;br /&gt;
    &lt;input id="cfh_3" type="checkbox" /&gt; Hito 3
    &lt;br /&gt;
    &lt;input id="cfh_4" type="checkbox" /&gt; Hito 4
    &lt;br /&gt;
    &lt;input id="cfh_5" type="checkbox" /&gt; Hito 5
    &lt;br /&gt;
    &lt;input id="cfh_7" type="checkbox" /&gt; Hito 6
    &lt;br /&gt;
    &lt;input id="cfh_8" type="checkbox" /&gt; Hito 7
    &lt;br /&gt;
    &lt;input id="cfh_4567" type="checkbox" /&gt; Hito 8
    &lt;br /&gt;
    &lt;input id="cfh_345" type="checkbox" /&gt; Hito Implementación final del evento
    &lt;br /&gt;
    &lt;input id="cfh_45671" type="checkbox" /&gt; Hito a8
    &lt;br /&gt;
    &lt;input id="cfh_45672" type="checkbox" /&gt; Hito s8
    &lt;br /&gt;
    &lt;input id="cfh_45673" type="checkbox" /&gt; Hito d8
    &lt;br /&gt;
    &lt;input id="cfh_45674" type="checkbox" /&gt; Hito f8
    &lt;br /&gt;
    &lt;input id="cfh_45675" type="checkbox" /&gt; Hito g8
    &lt;br /&gt;
  &lt;/div&gt;

&lt;/div&gt;

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.</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function obtenerSeleccionados() {
  var seleccionados = [];
  $('.contenedor input:checked').each(function() {
    seleccionados.push($(this).attr('id'));
  });
  alert(seleccionados);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.contenedor {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  position: fixed;
  background: white;
  margin-top: 2px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div&gt;

  Hito:

  &lt;input id='btnAbrirFiltro' type="button" value="Filtro múltiple" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();"&gt;

  &lt;input id='btnCerrarFiltro' type="button" value="Cerrar" style="display: none;" onclick="$('.contenedor').toggle();$('#btnFiltrar').toggle();$('#btnAbrirFiltro').toggle();$('#btnCerrarFiltro').toggle();"&gt;

  &lt;input id='btnFiltrar' type="button" value="Filtrar" style="display: none;" onclick="obtenerSeleccionados()"&gt;

  &lt;div class="contenedor" style="display: none;"&gt;
    &lt;input id="cfh_1" type="checkbox" /&gt; Hito 1
    &lt;br /&gt;
    &lt;input id="cfh_2" type="checkbox" /&gt; Hito 2
    &lt;br /&gt;
    &lt;input id="cfh_3" type="checkbox" /&gt; Hito 3
    &lt;br /&gt;
    &lt;input id="cfh_4" type="checkbox" /&gt; Hito 4
    &lt;br /&gt;
    &lt;input id="cfh_5" type="checkbox" /&gt; Hito 5
    &lt;br /&gt;
    &lt;input id="cfh_7" type="checkbox" /&gt; Hito 6
    &lt;br /&gt;
    &lt;input id="cfh_8" type="checkbox" /&gt; Hito 7
    &lt;br /&gt;
    &lt;input id="cfh_4567" type="checkbox" /&gt; Hito 8
    &lt;br /&gt;
    &lt;input id="cfh_345" type="checkbox" /&gt; Hito Implementación final del evento
    &lt;br /&gt;
    &lt;input id="cfh_45671" type="checkbox" /&gt; Hito a8
    &lt;br /&gt;
    &lt;input id="cfh_45672" type="checkbox" /&gt; Hito s8
    &lt;br /&gt;
    &lt;input id="cfh_45673" type="checkbox" /&gt; Hito d8
    &lt;br /&gt;
    &lt;input id="cfh_45674" type="checkbox" /&gt; Hito f8
    &lt;br /&gt;
    &lt;input id="cfh_45675" type="checkbox" /&gt; Hito g8
    &lt;br /&gt;
  &lt;/div&gt;

&lt;/div&gt;

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.</code></pre>
</div>
</div>
</p>


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

<p><img src="https://i.stack.imgur.com/E5r9N.png" alt="enter image description here"></p>

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

<p>Does anybody perhaps have an easier/better way of doing this?</p>

<p>Thanks in advance!</p>


Scrollable box containing list of Checkboxes in HTML

附上你会看到一张我为所需的用户界面做的模型的图片。如你所见，我需要一些包含复选框的滚动框。​​我已经想到了一个可滚动的div，尽管我找不到一种在div周围设置边框的方法？第二次我想到了IFrame..但也不太确定这是否是我最好的选择。有人可能有更简单/更好的方法来做这件事吗？提前感谢！

问包含HTML复选框列表的可滚动框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问包含HTML复选框列表的可滚动框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问包含HTML复选框列表的可滚动框
EN