如果选中或未选中 JavaScript，则隐藏或显示复选框答案

【问题标题】：Hide or display checkboxes if checked or not JavaScript如果选中或未选中 JavaScript，则隐藏或显示复选框
【发布时间】：2017-06-06 22:04:45
【问题描述】：

我遇到了一些复选框的问题，我无法根据它们是否被选中来过滤它们。

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

这是一个 sn-p，请在您的答案中更新它，让我看看它是如何完成的。

非常感谢！

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

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

	<span onclick="">All</span> | <span onclick="">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>

【问题讨论】：

你为 All/Selected 尝试了什么？

标签： javascript jquery html css checkbox

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

这里是你更新的 sn-p：

$(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();
  });
});

* {
    			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 id="chkAll">All</span> | <span id="chkSelected">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>

【讨论】：