隐藏或显示复选框（如果已选中或不显示）JavaScript

Question

我遇到了一些复选框的问题，我没有成功根据它们是否被选中进行过滤。

原理很简单。如果我点击“全部”，所有的复选框都会显示出来，但是如果我点击选中，我只想看到选中的复选框，并隐藏未选中的复选框。

这是一段代码，请在您的答案中更新它，让我看看它是如何完成的。

非常感谢！

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

Answer 1

您可以有两个功能，第一个节目做的投入所有的父母，第二隐伏投入所有的家长未签。

function All() { 
    $("input").parent().show(); 
} 

function OnlySelecteds() { 
    $("input:not(:checked)").parent().hide(); 
} 

//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 || '') 
 
} 
 

 
function All() { 
 
    $("input").parent().show(); 
 
} 
 

 
function OnlySelecteds() { 
 
    $("input:not(:checked)").parent().hide(); 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#data { 
 
    padding: 5px; 
 
    width: 100vw; 
 
} 
 

 
.multiselect { 
 
    overflow: visible; 
 
    padding: 0; 
 
    padding-left: 1px; 
 
    border: none; 
 
    background-color: #eee; 
 
    width: 100vw; 
 
    white-space: normal; 
 
    height: 200px; 
 
} 
 

 
.checkboxes { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid #000; 
 
    background-color: white; 
 
    margin-left: -1px; 
 
    display: inline-block; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    border: 1px grey solid; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span onclick="All()" style="cursor:pointer">All</span> | <span onclick="OnlySelecteds()" style="cursor:pointer">Selected</span> 
 
<form> 
 
    <div id="data"> 
 
    <div class="multiselect"> 
 
     <div id="c_b"> 
 
     <div id="checkboxes"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
<textarea id="t"></textarea>

Answer 2

您可以用checked选择器中选择所有选中的元素，所以你可以显示/隐藏其父：

$("#chkAll").click(function(){ 
    $(":checkbox").parent().show(); 
    }); 

    $("#chkSelected").click(function(){ 
    $(":checkbox").parent().hide(); 
    $(":checked").parent().show(); 
    }); 

这里更新的代码片段：

$(document).ready(function(){ 
 
    //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 || '') 
 
    } 
 

 
    $("#chkAll").click(function(){ 
 
    $(":checkbox").parent().show(); 
 
    }); 
 

 
    $("#chkSelected").click(function(){ 
 
    $(":checkbox").parent().hide(); 
 
    $(":checked").parent().show(); 
 
    }); 
 
});

* { 
 
    \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 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="chkAll">All</span> | <span id="chkSelected">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>