stackoom
  简体   繁体   中英

How to get data from checked checkboxes?

 原文  2019-07-15 04:34:47  7   5    javascript/ html

Question

I am trying to get data of the particular checkbox that I click and make that data go away if I uncheck it but clicking All I want all the data of the table to be displayed.

I don't want to use JQuery and want to use JavaScript. I tried doing as the code below but could not achieve the result I was expecting. 

 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>

I expect my output to display all of the values when clicked All and only particular values when a particular checkbox is clicked.

5 answers

solution1
 0  2019-07-15 04:48:28

I've touched up the JavaScript and HTML a tiny bit as below:

The main difference is having first, second and third variables in a global scope. Plus, moving the class="text" into the first TD.

Also, initailize(); which grabs the three HTML elements sort of thing.

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";
  }
}

And the 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>

Hope this helps,

Kind regards,

solution2
 0  2019-07-15 05:02:49

Just to specifically point out what was your issue:

Your <table> has a display: none style that is not updated from firstFunciton() or secondFunction() . So, even though you make the <td> visible, the parent ( <table> ) is still hidden, so the child rows or cells of the table will not show.

There are more elegant solutions, but to keep the code closest to what you have, you could update your HTML table to this: 

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

And your Javsacript function myFunction() to this: 

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";
  }
}

solution3
 0 ACCPTED  2019-07-15 05:50:31

You can try the following way: 

 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>

solution4
 0  2019-07-15 06:26:11

You can achieve this using pure javascript like this 

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 code 

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

fiddle link

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

you can optimise this code...

solution5
 0  2019-07-15 06:33:58

check below code if works as per your requirement: 

 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>

Hope this helps.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to get all checked checkboxes How to get ID of checked checkboxes from foreach loop how to get all checked checkboxes from a dynamically generated form in the order How to do filtering on the basis of checkboxes checked with data coming from API How to Get the check box checked value from list of checkboxes and call an Ajax function when check box is checked? Get value from all checked checkboxes with .serializeArray Get elements from Parent Row of checked checkboxes jQuery get checked checkboxes from name[] Get checked items from a tree view with checkboxes Get value from dynamically created checkboxes if checked
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM