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

时间：2019-07-15 04:34:47

标签： javascript html

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

我不想使用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>

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

6 个答案:

答案 0 :(得分：0)

我对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 :(得分：0)

只需特别指出您的问题是什么

您的<table>具有display: none样式，该样式未从firstFunciton()或secondFunction()更新。因此，即使您使<td>可见，父（<table>）仍处于隐藏状态，因此表的子行或单元格将不会显示。

还有更优雅的解决方案，但是要使代码保持最接近的状态，可以将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>

还有您的Javsacript函数myFunction()：

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

答案 2 :(得分：0)

您可以尝试以下方式：

function myFunction(chk) {
  var all = document.querySelectorAll('.text tr td');
  if(chk.classList.value.includes('All')){
    if(chk.checked){
      all.forEach(function(td){
        td.style.display = "block";
      });
    }
    else{
      all.forEach(function(td){
        td.style.display = "none";
      });
    }
  }
  if(chk.classList.value.includes('select-one')){
    document.querySelector('.All').checked = false;
    all.forEach(function(td){
      td.style.display = "none";
    });
    if(chk.checked){
      document.querySelector('.text-one').style.display = "block";
    }
    if(document.querySelector('.select-two').checked){
      document.querySelector('.text-two').style.display = "block";
    }
  }
  if(chk.classList.value.includes('select-two')){
    document.querySelector('.All').checked = false;
    all.forEach(function(td){
      td.style.display = "none";
    });
    if(chk.checked){
      document.querySelector('.text-two').style.display = "block";
    }
    if(document.querySelector('.select-one').checked){
      document.querySelector('.text-one').style.display = "block";
    }
  }
  
}
<input type="checkbox" class="All" onclick="myFunction(this)">All
<input type="checkbox" class="select-one" onclick="myFunction(this)">Select 1
<input type="checkbox" class="select-two" onclick="myFunction(this)">Select 2
<table class="text">
  <tr>
    <td 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>

答案 3 :(得分：0)

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

您可以优化此代码...

答案 4 :(得分：0)

检查以下代码是否符合您的要求：

function myFunction(t) {

	var text = document.getElementsByClassName("text-all")[0];
      if(t.checked)
      {	
      	text.style.display = "block";
        var checkboxes = document.getElementsByName("chk");
        for(var i=0, n=checkboxes.length;i<n;i++) {
    			checkboxes[i].checked = true;
          CheckFunction(checkboxes[i]);
  			}
      }
      else
      {	
      	text.style.display = "none";
        var checkboxes = document.getElementsByName("chk");
        for(var i=0, n=checkboxes.length;i<n;i++) {
    			if(checkboxes[i].checked)
          	{	checkboxes[i].checked = false;
          		CheckFunction(checkboxes[i]);
             }
  			}
      }
}

function CheckFunction(chk)
{
	if(chk.id == "chk-one")
  {
    var text = document.getElementsByClassName("text-one")[0];
    if (chk.checked == true) {
      text.style.display = "block";
    } else {
      unchkAll(text);
    }
  }
  else
  {
  	var text = document.getElementsByClassName("text-two")[0];
    if (chk.checked == true) {
      text.style.display = "block";
    } else {
      unchkAll(text);
    }
  }
}

function unchkAll(text)
{
text.style.display = "none";
      var chkall = document.getElementById("chk-all");
      if(chkall.checked)
      {
      	chkall.checked = false;
      	myFunction(chkall);
      }
}
<input type="checkbox" name="chkbox" id="chk-all" class="All" onclick="myFunction(this)">All
<input type="checkbox" id="chk-one" name="chk" class="select-one" onclick="CheckFunction(this)">Select 1
<input type="checkbox" id="chk-two" name="chk" class="select-two" onclick="CheckFunction(this)">Select 2
<table class="text">
  <tr>
    <td class="text-all" 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>

希望这会有所帮助。

答案 5 :(得分：-1)

您可以编写一个单独的方法来隐藏或显示内容，然后在要显示的两个tr上调用它。因此，当单击复选框将显示所有内容时，请考虑以下事项：

function myFunction() {
  var anychecked = false;
  var allchecked = document.getElementsByClassName("All")[0].checked;

  document.querySelectorAll("input:not(.All)").forEach(e => {
    if (e.checked)
      anychecked = true;
    toggleContent(e.checked || allchecked, document.getElementsByClassName(e.classList[0].replace("select", "text"))[0]);
  });

  var check = anychecked ? anychecked : allchecked;
  var text = document.getElementsByClassName("text")[0];
  toggleContent(check, text);
  if (!anychecked) {
    toggleContent(check, document.getElementsByClassName("text-one")[0]);
    toggleContent(check, document.getElementsByClassName("text-two")[0]);
  }
}

function toggleContent(toggle, ele) {
  var text = document.getElementsByClassName("text")[0];

  if (toggle) {
    ele.style.display = "block";
    text.style.display = "block";
  } else {
    ele.style.display = "none";
    var anychecked = false;
    document.querySelectorAll("input:not(.All)").forEach(e => {
      if (e.checked)
        anychecked = true;
    });
    if (!anychecked)
      text.style.display = "none";
  }
}

function firstFunction() {
  var checkBox = document.getElementsByClassName("select-one")[0];
  var text = document.getElementsByClassName("text-one")[0];
  toggleContent(checkBox.checked, text);
}

function secondFunction() {
  var checkBox = document.getElementsByClassName("select-two")[0];
  var text = document.getElementsByClassName("text-two")[0];
  toggleContent(checkBox.checked, text);
}
<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>

相关问题
最新问题