0
いくつかのコードスニペットを使用して複数選択チェックボックスを設計しました。複数選択チェックボックスの適用ボタンの位置を固定
ただし、ユーザーが適用ボタンを選択するためにリストにスクロールしないようにしたいとします。
次のスナップショットでは、ユーザーがリストの一番下までスクロールしない限り、適用ボタンはありません。
私が達成しようとしているのは、スクロールバーをSelect MeasureとApply Buttonの間に表示することです。
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
line-height: 0px;
height: 100px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>/
関連jsfiddleへのリンクを追加 – Dekel
フィドルが空である –
https://jsfiddle.net/harsha547/x27181u6/ –