JavaScript - Function to change ul to display when checkbox is ticked

Related searches

I have a javascript function to change a ul from display:none; to display:block; when the checkbox is ticked.

function toggleDelbox(){
    var dgcbt = document.getElementById("removeFromGroup")
    if(dgcbt.checked){
       document.getElementById("remove-from-group-ul").style.display = "block";
    } else {
        document.getElementById("remove-from-group-ul").style.display = "none";
   }
}

The checkbox can be found against every group that gets displayed - the groups returned are based on a search that results in an array and to display them with a checkbox next to them i'm looping through the array like this:

foreach ($result as $group) { 
?><input type="checkbox" name="removeFromGroup[]" id="removeFromGroup" value="<?php echo "$group"?>" onclick='toggleDelbox();'> <?php echo "$group"; echo "<br>";}
<br>
<ul class="remove-from-group" id="remove-from-group-ul" name="remove-from-group-ul">
<input type="submit" value="Delete from group" onclick="return confirm('Are you sure you want to delete the user from the selected group(s)?')" />  <input type="reset" value="Clear Selection">
</ul>

So with this if I tick all checkboxes my ul changes to display:block;, my problem is i want the ul to display when ANY checkbox is ticked rather then all of them. I think my problem may have something to do with all the checkboxes having the same ID but i'm hoping i can alter my function so it looks for any tick in any of the elements "removeFromGroup", is this possible and am i tackling this in the right way or would there be a better approach?

  1. Your code can produce more than 1 element of the same id - please avoid this.

  2. if you would add class (ex. removeFromGroup) to the input instead of id then in js function you could use var dgcbt = document.querySelectorAll(".removeFromGroup") then dgcbt would be a collection of inputs.

function toggleDelbox() {
  var elems = document.querySelectorAll('.removeFromGroup');
  var shouldShowList = false;
  elems.forEach(function(elem) {
    if (elem.checked) {
      shouldShowList = true;
    }
  });
  document.querySelector('#remove-from-group-ul').style.display = shouldShowList ? '' : 'none';
}
<input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value="" onclick='toggleDelbox();'>
<input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value="" onclick='toggleDelbox();'>
<input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value="" onclick='toggleDelbox();'>
<ul id="remove-from-group-ul" style="display:none;" >
  <li>aaaa</li>
  <li>bbbb</li>
</ul>

HTML DOM Input Checkbox checked Property, function uncheck() { The checked property sets or returns the checked state of a checkbox. Use a checkbox to convert text in an input field to uppercase:. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

You could do like below perhaps.

  • This is a test
  • .remove-from-group {
      display: none;
    }
    
    .removeFromGroup:checked~.remove-from-group {
      display: block;
    }
    <div>
      <input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value="">
    
      <ul class="remove-from-group" id="remove-from-group-ul">
        <li>This is a test</li>
      </ul>
    </div>
    
    <div>
      <input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value="">
    
      <ul class="remove-from-group" id="remove-from-group-ul">
        <li>This is a test</li>
        <li>This is a test</li>
      </ul>
    </div>

    Indeterminate Checkboxes, click(function(e) { el = $(this); switch(el.data('checked')) { // unchecked, going indeterminate case� The JavaScript function above looks at the “checked” property of the DOM element that represents the checkbox that has been clicked on. If the property is set to TRUE, it means that the checkbox has been ticked. Similarly, if it is FALSE, then it means that the checkbox is NOT ticked. Detect checkbox change with JQuery.

    Premising that all the ID should not be duplicated you could avoid using Javascript and resolve with CSS, by toggling only the first list after the checked checkbox

    #removeFromGroup + br + ul { display: none; }
    #removeFromGroup:checked + br + ul { display: block; }
    

    As a side note, the input inside the list should be contained in a list-item

    If you're going to change the id by appending a counter, as in my comment below, you can still use CSS

    [id^="removeFromGroup"] + br + ul { display: none; }
    [id^="removeFromGroup"]:checked + br + ul { display: block; }
    

    :checked, The :checked CSS pseudo-class selector represents any radio (input type="radio "), checkbox the user toggle content based on the state of a checkbox, all without using JavaScript. background: #ddd; } /* Style the button */ #expand-btn { display: inline-block; margin-top: Living Standard, No change. For our example, the function called onclick updates the total field in the form using the value of the checkbox clicked. The complete JavaScript for the form is displayed below. JavaScript for Checkboxes Onclick Demo. The JavaScript to handle clicks on the checkboxes and update the total is displayed here with explanation below:

    IDs have to be unique!

    Instead use data attributes, delegation and classes

    Additionally your HTML is illegal. You need to use LIs in a UL but then you cannot have the checkboxes.

    Here is an improved markup and execution. The form will be submitted with the group=group1 if the first delete button is clicked and the confirm approved

    document.getElementById("groups").addEventListener("click", function(e) {
      var tgt = e.target;
      if (tgt.classList.contains("remove")) {
        document.getElementById(tgt.getAttribute("data-id")).classList.toggle("hide", this.checked)
      } else if (tgt.type === "submit") {
        if (!confirm("Delete from group")) e.preventDefault()
      }
    })
    .hide {
      display: none
    }
    <form>
      <div id="groups">
        <input type="checkbox" name="removeFromGroup[]" class="remove" data-id="group1">Group 1
        <div id="group1">
          <button type="submit" name="group" value="group1">Delete from group</button> <input type="reset" value="Clear Selection">
        </div>
        <input type="checkbox" name="removeFromGroup[]" class="remove" data-id="group2">Group 2
        <div id="group2">
          <button type="submit" name="group" value="group2">Delete from group</button> <input type="reset" value="Clear Selection">
        </div>
        <input type="checkbox" name="removeFromGroup[]" class="remove" data-id="group3">Group 3
        <div id="group3">
          <button type="submit" name="group" value="group3">Delete from group</button> <input type="reset" value="Clear Selection">
        </div>
      </div>
    </form>

    Checkbox Example (Mixed-State), If the set contains both some checked and unchecked checkboxes, the mixed state Activating the tri-state checkbox changes the states of the checkboxes in the set. </ul> </fieldset> <script type="text/javascript"> function checkboxFocus � This function is doing the calculation for us, and most importantly we are checking here if the checkboxes are checked using the JavaScript if else condition. function calculateCheckbox {// get beauty products checkboxes contianer's reference var el = document. getElementById ('beautyProducts'); // get beauty product input element reference in

    Bootstrap Snippet Checked List Group using HTML CSS Bootstrap , Bootstrap example of Checked List Group using HTML, Javascript, jQuery, and CSS. Under the .js //settings add a checkboxinput variable: But the checked state doe not show on checked trigger state. I use this in a form, but I do something like this $('ul.checked-list-box li.active') this returns each list item that has been� Angular checkbox is a regular checkbox that can be seen as a square box that is ticked (checked) when activated. HTML checkboxes are used to let a user select one or more options for a limited number of choices. In HTML, the <input type=”checkbox”> defines a checkbox. Angular checkbox example

    Checkboxes are a fundamental input component typically represented by an empty box in the unselected state and a box with a checkmark (hence the checkbox name) when selected. They are used to represent a boolean choice, each correlating to a value choice. Managing checkboxes in HTML, specifically using JavaScript and jQuery can seem a bit

    The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices!

    Comments
    • This is not a PHP question. Please click edit, then [<>] snippet editor and create a minimal reproducible example
    • @mplungjan Im really sorry but i dont understand how to create a minimal reproducible example, the part of that page titled how to create doesnt actually tell or show how to create? AndrewL64 im not sure what more html is needed? the only thing missing here is that im starting a form and then closing the form?
    • As I said: Click edit, then in the dialog press the [<>] button and paste HTML, CSS and JavaScript into the relevant panes. I have given an answer with markup that will work better for you
    • Check my answer below, just a css implementation with only classes and no unique IDs
    • no, with the given markup this will toggle all the following lists, not only the first sibling list
    • Check my example - I have added two lists and two checkboxes, but using the same classname
    • This works as long as you add a wrapper for each checkbox and list. You should highlight to the OP that a wrapper is necessary because they are not using it.
    • Yeah agree on that. Hopefully OP has the option to add a wrapper for each block.
    • The ID is duplicated because my list is built from an array that changes in the number of values so im not sure how i could set each value to be unique and then be able to target any of them in the javascript as i wont know the ID?
    • You should not use an ID more than one time in a page, it's "illegal"
    • You are printing markup inside a for loop: use a counter to append to the id, e.g. id="removeFromGroup<?php echo $i++ ?>"
    • ok so my ids would be "removeFromGroup1" - "removeFromGroup2" etc... how would i then target any of these in my javascript? can i have a wildcard e.g. document.getElementById("removeFromGroup*")
    • @a.smith for this task you should really use only CSS. Are you sure you need to use JS ?