Show div when checkbox id checked but under the all checkboxes

I have a form containing 20 checkboxes.

I want to show the content of a div when a checkbox is checked. I got a result like that

#toggle-content1 {
  display: none;
}

#mycheckbox1:checked~#toggle-content1 {
  display: block;
  height: 100px;
}

#toggle-content2 {
  display: none;
}

#mycheckbox2:checked~#toggle-content2 {
  display: block;
  height: 100px;
}
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<div id="toggle-content1">
  This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content2">
  This content should appear when the checkbox is checked
</div>

You can try something like this:

.content {
  display: none;
  width: 100%;
}

/*Use + to target only one .content*/
input[type=checkbox]:checked + .content {
  display: block;
  height: 50px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

input[type=checkbox] {
  order: -1; /*make all the input on the top*/
}
<div class="container">
  <input type="checkbox" name="mycheckbox" value="0">
  <div class="content">
    0)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="1">
  <div class="content">
    1)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="2">
  <div class="content">
    2)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="3">
  <div class="content">
    3)This content should appear when the checkbox is checked
  </div>
</div>

Check if a CheckBox is checked or not using ID in JavaScript and , How can check checkbox is checked or not in jQuery using ID? How to Show and Hide div elements using Checkboxes ? In order to display data/content of a specific element by selecting the particular checkbox in jQuery we can use the toggle() method . The toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements.

I simply reordered your tags, input first then divs. But i'm not really sure that's what you want

#toggle-content1 {
  display: none;
}

#mycheckbox1:checked~#toggle-content1 {
  display: block;
  height: 100px;
}

#toggle-content2 {
  display: none;
}

#mycheckbox2:checked~#toggle-content2 {
  display: block;
  height: 100px;
}
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content1">
  This content should appear when the checkbox1 is checked
</div>
<div id="toggle-content2">
  This content should appear when the checkbox2 is checked
</div>

HTML input checked Attribute, attribute can also be set after the page load, with a JavaScript. JavaScript Check If Checkbox is Checked Demo. With the help of onClick event, JavaScript function and this keyword, we can pretty easily check If the checkbox is checked. JavaScript Multiple Checkboxes Onclick Example. In the below example we are going to manage the multiple checkboxes Onclick example using the JavaScript.

please have a look below updated code, hope you will find the solutions.

.chkBox{
display:inline-block;
position:relative;
}

.chkTxt{
background:#fff;
padding:10px;
border:1px solid #ccc;
width:500px;
height:100px;
position:absolute;
top:100%;
left:0;
display:none;
}

.chkBox input[type="checkbox"]:checked + .chkTxt{
display:block;
}
<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
  <div class="chkTxt">This content should appear when the checkbox1 is checked </div>
</div>

<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
  <div class="chkTxt">This content should appear when the checkbox2 is checked </div>
</div>


<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox3" value="0" />
  <div class="chkTxt">This content should appear when the checkbox3 is checked </div>
</div>

<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox4" value="0" />
  <div class="chkTxt">This content should appear when the checkbox4 is checked </div>
</div>


<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox5" value="0" />
  <div class="chkTxt">This content should appear when the checkbox5 is checked </div>
</div>

Show Hide DIV Based on Click of Checkboxes in jQuery, How to show and hide div elements based on the click of checkboxes in jQuery The div boxes in the example are hidden by default using the CSS display <​label><input type="checkbox" name="colorCheckbox" value="red"> red</label> elements based on dropdown selection in jQuery · How to check an element is​  I am trying to check/uncheck all checkboxes using jQuery. Now by checking/unchecking the parent checkbox all the child checkboxes are getting selected/deselected also with the text of parent checkbox

I would use a script for this...and in a real application, I would use a model + templating engine. (Vue engine sample) This way you can put your output wherever you want and format however you like it. This way you can also load a new datamodel from the server(store your checkbox questions/values/answers in db somwhere) and it would redraw/update your entire page without needing any updates from you.

// HTML
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="1" />
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="2" />
<input type="checkbox" name="mycheckbox" id="mycheckbox3" value="3" />
<input type="checkbox" name="mycheckbox" id="mycheckbox4" value="4" />
<div id="activeCheckboxes"></div><!-- you can put this anywhere on the page -->

// JavaScript
const checkboxes = {
  1: {checked: false, message: 'First checkbox checked'},
  2: {checked: false, message: 'Second checkbox checked'},
  3: {checked: false, message: 'Third checkbox checked'},
  4: {checked: false, message: 'Fourth checkbox checked'}
};
const activeCheckboxes = document.getElementById('activeCheckboxes');
const updateCheckboxes = () => {
    activeCheckboxes.innerHTML = '';
  Object.keys(checkboxes).forEach((val) => {
    let checkbox = checkboxes[val];
    if (checkbox.checked) {
        activeCheckboxes.innerHTML += '<div>'+checkbox.message+'</div><hr>';
    }
  });
};
$(document).ready(() => {
  $('input[type]="checkbox"').click((evt) => {
    checkboxes[evt.target.value].checked = evt.target.checked;
    updateCheckboxes();
  });
});

Sample Fiddle

Check multiple Checkboxes if checked make divs visable, I have this working off of an onclick event but it's not working on load. there are any check boxes that are checked, if there are then open the divs attached to them. This link is very close but only works off of one checkbox. + x).is(':​checked')){ $('.open' + x).show(500); } else { $('.open' + x).hide(500); } });. But question is Check if all checkboxes are selected. So the correct code is: $('input.abc').not(':checked').length === 0. – hlcs Jun 20 '17 at 13:37. This answer is better than the accepted answer if you consider performance. This will loop just once, instead of twice.

Quick Tip: Persist Checkbox Checked State after Page Reload , <div id="checkbox-container"> <div> <label for="option1">Option You'll notice that I've included a Check All button to allow a user to It goes without saying that form fields should have labels anyway, but in the case of checkboxes those checkboxes I am interested in and not all of the checkboxes on  Check whether a checkbox is checked with JavaScript. Checkbox is CHECKED! Your message has been sent to W3Schools. W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant

:checked Selector, Description: Matches all elements that are checked or selected. The :checked selector works for checkboxes, radio buttons, and options of select elements. To retrieve <input type="checkbox" name="newsletter" value="Daily"> "div" ).text​( n + (n === 1 ? <input type="radio" name="fruit" value="orange" id="orange">. In the above example a click event handler has been assigned to the HTML input button. When the button is clicked, jQuery finds all the checkboxes with name “chk” and that are checked using input:checkbox[name=chk]:checked selector and then the Id and value attribute of the all checked or selected HTML input checkboxes are displayed in alert using jQuery.

How to Check/Uncheck CheckBoxes in a Page using , Today, I'll show you how to check or uncheck a particular checkbox using and if you are running on lower jQuery version then you can also use attr() to and Vue JS but if you are not using those frameworks, jQuery can still be a use element selector like input[type='checkbox'] to select all checkboxes. 19 August, 2014 by Tom Elliott. Here’s a handy jQuery function that will loop through all checkboxes in a given form to see if they have been checked or not. A boolean variable anyBoxesChecked is first set and we use jQuery’s .each() function to loop through each checkbox using the input[type="checkbox"] selector.

Comments
  • downside with this is that you position it absolute.
  • To prevent misplacement of check box i use position absolute. in this way you can repeat/use multiple checkbox in loop there will be no issues. no matter your loop runs 50 or 1000 times
  • Yes, that also makes it hard to maintain with dynamic height if you have content below that you don't want to cover when it expands.