我遇到了一些複選框的問題,我沒有成功根據它們是否被選中進行過濾。隱藏或顯示覆選框(如果已選中或不顯示)JavaScript
原理很簡單。如果我點擊「全部」,所有的複選框都會顯示出來,但是如果我點擊選中,我只想看到選中的複選框,並隱藏未選中的複選框。
這是一段代碼,請在您的答案中更新它,讓我看看它是如何完成的。
非常感謝!
//array of options
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "Juny";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";
var target = new Array()
target[0] = "5";
target[1] = "8";
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";
var j = "";
var t = document.getElementById('t');
// the loop is creating the checkboxes with name, value...
for (var i in choices) {
//Name of checkboxes are their number so I convert the i into a string.
j = i.toString();
val = j;
//cap will be the value/text of choices[i]
var cb = document.createElement('input');
var label = document.createElement("label");
cap = choices[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = cap;
cb.value = val;
label.appendChild(cb);
label.appendChild(text);
cbh.appendChild(label);
cb.addEventListener('click', updateText)
if(target.indexOf(i)>=0){
cb.checked =true ;
}
}
updateText();
function updateText() {
t.value = [null, ...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s, el) => el && el.checked ? s = (s || '') + el.value + '$#' : s || '')
}
\t \t \t * {
\t \t \t box-sizing: border-box;
\t \t \t }
\t \t \t #data {
\t \t \t padding:5px;
\t \t \t \t width:100vw;
\t \t \t }
\t \t \t .multiselect {
\t \t \t \t overflow: visible;
\t \t \t \t padding:0;
\t \t \t \t padding-left:1px;
\t \t \t \t border:none;
\t \t \t \t background-color:#eee;
\t \t \t \t width:100vw;
\t \t \t \t white-space: normal;
\t \t \t \t height:200px;
\t \t \t }
\t \t \t .checkboxes {
\t \t \t \t height:100px;
\t \t \t \t width:100px;
\t \t \t \t border:1px solid #000;
\t \t \t \t background-color:white;
\t \t \t \t margin-left:-1px;
\t \t \t \t display:inline-block;
\t \t \t }
label {
\t \t \t \t display: inline-block;
\t \t \t \t border: 1px grey solid;
\t \t \t \t padding:5px;
\t \t \t }
\t <span onclick="">All</span> | <span onclick="">Selected</span>
\t <form>
\t <div id="data">
\t \t <div class="multiselect">
\t \t \t <div id="c_b">
\t \t \t \t <div id="checkboxes">
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
</form>
<textarea id="t"></textarea>
你對全部/選擇了什麼? – James