How to toggle the visibility of checkboxes in JavaScript based on their checked status

Question

How to toggle the visibility of checkboxes in JavaScript based on their checked status

I am facing an issue with some checkboxes as I am unable to filter them based on whether they are checked or not.

The concept is simple. When I click on "All", all the checkboxes should be displayed. However, when I click on "Selected", only the selected checkboxes should be visible while the unchecked ones should be hidden.

Below is a code snippet that needs updating in your response to demonstrate how this can be achieved:

Thank you!

//array of options
var choices = new Array();
choices[0] = "January";
...
...

* {
    box-sizing: border-box;
}
#data {
padding:5px;
width:100vw;
}

...
...
...

<span onclick="">All</span> | <span onclick="">Selected</span>
...
...
...

javascript jquery html css checkbox

Answer 1

Answer №1

There are two functions that can help achieve this task. The first function displays all the parent elements of the input fields, while the second function hides the parent elements of inputs that are not checked.

function DisplayAllParents() {
  $("input").parent().show();
}

function HideUncheckedParents() {
  $("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 DisplayAllParents() {
  $("input").parent().show();
}

function HideUncheckedParents() {
  $("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="DisplayAllParents()" style="cursor:pointer">All</span> | <span onclick="HideUncheckedParents()" 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>

Answer 2

There are two functions that can help achieve this task. The first function displays all the parent elements of the input fields, while the second function hides the parent elements of inputs that are not checked.

function DisplayAllParents() {
  $("input").parent().show();
}

function HideUncheckedParents() {
  $("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 DisplayAllParents() {
  $("input").parent().show();
}

function HideUncheckedParents() {
  $("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="DisplayAllParents()" style="cursor:pointer">All</span> | <span onclick="HideUncheckedParents()" 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>

Answer 3

Answer №2

To display or hide the parent element of checked elements, you can use the following code snippet with jQuery:

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

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

Check out the updated snippet below:

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

Answer 4

To display or hide the parent element of checked elements, you can use the following code snippet with jQuery:

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

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

Check out the updated snippet below:

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

How to toggle the visibility of checkboxes in JavaScript based on their checked status

Answer №1

Answer №2

Similar questions

Error: SvelteKit server-side rendering encountered a TypeError when trying to fetch data. Unfortunately, Express is not providing a clear TypeScript stack trace

Slide the first div upward to display the text in the second div when hovering over the first div

Implement Icon using CSS Class in jQuery Mobile

Setting up craco for jsx in your project

Waiting for onAuthStateChanged in Supabase to prevent flickering when using useEffect: What's the right way to ensure the request has finished?

Restore font-weight if a different list item is chosen

problem with overlapping elements

Ag-Grid: A Guide to Storing and Restoring Columns with Filter Settings

Can I compile a build using browserify/babel for a specific browser version?

Searching for an element with line breaks in its class name on a website using Selenium in Python

Center the input field both vertically and horizontally within an overlay

Application in Ionic for streaming YouTube videos

The latest alpha version of Angular2 Material Design (alpha.9-3) encountered a "404 not found" error when trying to access @angular

Clicking on the button will advance to the next tab rather than selecting the tab

How to iterate over the request body in Node.js using Express?

What is the best way to achieve rounded table borders without duplicating them or relying on border-collapse?

Generating a dynamic list of items using arrays in JQuery

What is the best way to implement a 2-dimensional array in Django's template using jQuery?

Display text with a hover effect

Troubleshooting: Issue with Adobe Analytics DTM custom script property not being successfully