Javascript 如何从选中的复选框中获取数据？_Javascript_Html

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

javascript html

Javascript 如何从选中的复选框中获取数据？,javascript,html,Javascript,Html,我正在尝试获取我单击的特定复选框的数据，如果我取消选中该复选框，但单击“全部”，则使该数据消失。我希望显示表的所有数据我不想使用JQuery，而是想使用JavaScript。我试着按照下面的代码去做，但是没有达到我期望的结果函数myFunction（）{ var checkBox=document.getElementsByClassName（“全部”）[0]； var text=document.getElementsByClassName（“text”）[0]；如果（checkBox

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

我不想使用JQuery，而是想使用JavaScript。我试着按照下面的代码去做，但是没有达到我期望的结果

函数myFunction（）{
var checkBox=document.getElementsByClassName（“全部”）[0]；
var text=document.getElementsByClassName（“text”）[0]；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}
函数firstFunction（）{
var checkBox=document.getElementsByClassName（“选择一个”）[0]；
var text=document.getElementsByClassName（“text one”）[0]；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}
函数secondFunction（）{
var checkBox=document.getElementsByClassName（“选择两个”）[0]；
var text=document.getElementsByClassName（“文本二”）[0]；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}

全部
选择1
选择2
复选框已选中！
复选框被选中1！
复选框被选中2！

我对JavaScript和HTML稍加修改，如下所示：

主要区别在于在全局范围内具有第一、第二和第三个变量。另外，将class=“text”移动到第一个TD中

另外，initailize（）；它抓住了三个HTML元素之类的东西

JavaScript:

var  first = ''
,    second = ''
,    third = '';

function initialize () {

    first = document.getElementsByClassName('text')[0];
    second = document.getElementsByClassName('text-one')[0];
    third = document.getElementsByClassName('text-two')[0];
}

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

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

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

以及HTML：

<body onload="initialize();">
    <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>
      <tr>
        <td class="text" style="display:none">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>
</body>


全部的
选择1
选择2
复选框已选中！
复选框被选中1！
复选框被选中2！

希望这有帮助

亲切的问候，

只想特别指出您的问题：

您的

有一个

显示：none

样式，它不是从

firstfunction（）

或

secondFunction（）

更新的。因此，即使您使

可见，父（

）仍然是隐藏的，因此表的子行或单元格将不会显示

还有更优雅的解决方案，但为了使代码与现有代码保持最接近，您可以将HTML表更新为：

<table>
  <tr>
    <td class="text" style="display:none">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>

您可以尝试以下方法：

函数myFunction（chk）{
var all=document.querySelectorAll（'.text tr td'）；
if（chk.classList.value.includes（'All'））{
如果（已检查）{
all.forEach（函数（td）{
td.style.display=“块”；
});
}
否则{
all.forEach（函数（td）{
td.style.display=“无”；
});
}
}
if（chk.classList.value.includes（'select-one'））{
document.querySelector（'.All'）。checked=false；
all.forEach（函数（td）{
td.style.display=“无”；
});
如果（已检查）{
document.querySelector（'.text one'）.style.display=“block”；
}
if（document.querySelector（'.select two'）。选中）{
document.querySelector（'.text two'）.style.display=“block”；
}
}
if（chk.classList.value.includes（'select-two'））{
document.querySelector（'.All'）。checked=false；
all.forEach（函数（td）{
td.style.display=“无”；
});
如果（已检查）{
document.querySelector（'.text two'）.style.display=“block”；
}
if（document.querySelector（'.select one'）。选中）{
document.querySelector（'.text one'）.style.display=“block”；
}
}
}

全部
选择1
选择2
复选框已选中！
复选框被选中1！
复选框被选中2！

您可以像这样使用纯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;
 }

var classname=document.getElementsByClassName（“全部”）；
var myFunction=function（）{
var at=this.getAttribute（“id”）；
如果（at=='selectAll'）{
var checkedle=classname[0]。已选中；
var closestTr=classname[0]。最近的（“td”）。最近的（“tr”）；
closestTr.getElementsByClassName（'togg'）[0]。style.display=checkedle？'block'：'none'；
对于（var i=1；i


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>


全部的
复选框已选中！
选择1
复选框被选中1！
选择2
复选框被选中2！

小提琴连杆

您可以优化此代码…
如果符合您的要求，请检查以下代码：

函数myFunction（t）{
var text=document.getElementsByClassName（“text all”）[0]；
如果（t.checked）
{	
text.style.display=“块”；
var复选框=document.getElementsByName（“chk”）；
对于（var i=0，n=checkboxes.length；idocument.queryselectoral（“[class*=text]”）而言，循环遍历每个节点并更改css“style.display”，不仅仅是第一个，您的
具有显示：无
，因此，即使您使
在第一个函数（）
或第二个函数（）
中可见，您的（它是父容器）仍然隐藏。我们可以使用JQuery吗？正如您所知，JQuery的工作速度更快，代码也很短？我们可以使用JQuery，但我想专注于JS来解决这个问题。@AnushaNeupane，您能澄清一下吗
<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>