时间戳

首页 > 解决方案 > 如何从选中的复选框中获取数据？

javascript - 如何从选中的复选框中获取数据？

问题描述

我正在尝试获取我单击的特定复选框的数据，如果我取消选中它但单击所有我希望显示表的所有数据，则使该数据消失。

我不想使用 JQuery 并想使用 JavaScript。我尝试按照下面的代码进行操作，但无法达到我期望的结果。

function myFunction() {
  var checkBox = document.getElementsByClassName("All")[0];
  var text = document.getElementsByClassName("text")[0];
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

function firstFunction() {
  var checkBox = document.getElementsByClassName("select-one")[0];
  var text = document.getElementsByClassName("text-one")[0];
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

function secondFunction() {
  var checkBox = document.getElementsByClassName("select-two")[0];
  var text = document.getElementsByClassName("text-two")[0];
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
<input type="checkbox" class="All" onclick="myFunction()">All
<input type="checkbox" class="select-one" onclick="firstFunction()">Select 1
<input type="checkbox" class="select-two" onclick="secondFunction()">Select 2
<table class="text" style="display:none">
  <tr>
    <td>Checkbox is CHECKED!</td>


  </tr>
  <tr>
    <td class="text-one" style="display:none">Checkbox is CHECKED 1!</td>
  </tr>
  <tr>
    <td class="text-two" style="display:none">Checkbox is CHECKED 2!</td>
  </tr>
</table>

我希望我的输出在单击全部时显示所有值，并且在单击特定复选框时仅显示特定值。

标签： javascripthtml

解决方案

您可以像这样使用纯javascript来实现这一点

var classname = document.getElementsByClassName("All");
var myFunction = function() {
var at = this.getAttribute("id");
if(at == 'selectAll' ) {
var checkedele = classname[0].checked;
var closestTr = classname[0].closest("td").closest("tr");
    closestTr.getElementsByClassName('togg')[0].style.display=checkedele?'block':'none';
  for (var i = 1; i < classname.length; i++) {
            classname[i].checked = checkedele;
           var closestTr = classname[i].closest("td").closest("tr");
           closestTr.getElementsByClassName('togg')[0].style.display= checkedele?'block':'none';
  }
} else {
var checkedele = this.checked;
var closestTr = this.closest("td").closest("tr");
         closestTr.getElementsByClassName('togg')[0].style.display= checkedele?'block':'none';
}

var checkedCount = 0
for (var i = 1; i < classname.length; i++) {
if(classname[i].checked){
 checkedCount++; 
 }
}

if(!checkedCount) {
classname[0].checked = false
var closestTr = classname[0].closest("td").closest("tr");
    closestTr.getElementsByClassName('togg')[0].style.display='none';
}
};


 for (var i = 0; i < classname.length; i++) {
   classname[i].onclick = myFunction;
 }

html代码

<table class="text">
  <tr>
<td><input type="checkbox" class="All" id="selectAll">All</td>
<td class="togg" style="display:none">Checkbox is CHECKED!</td>
</tr>
 <tr>
   <td><input type="checkbox" class="select-one All">Select 1</td>
   <td class="togg" style="display:none">Checkbox is CHECKED 1!</td>
 </tr>
 <tr>
   <td><input type="checkbox" class="select-two All">Select 2</td>
   <td class="togg" style="display:none">Checkbox is CHECKED 2!</td>
  </tr>
</table>

小提琴链接

http://jsfiddle.net/gfz1vyr2/1/

您可以优化此代码...

推荐阅读