You might want to read this post on how to conditionally display fields in Contact Form 7 plugin with simple JavaScript first to get some context.
Here we are trying to display a line of text when all checkboxes are checked.
Here is the result.
Here is the markup that goes into the contact form editor of Contact Form 7.
<div id="pancakes">What do you think is the greatest risk of getting sick?
[checkbox checkbox-411 use_label_element "Purchase of animals" "Livestock farmers in the area" "Animals in nature areas"]</div>
<p id="answer-for-pancakes">All answers are good. The purchase of animals is the greatest risk, but also in other ways, viruses can enter the livestock.</p>
Here is the JavaScript
<script language="javascript" type="text/javascript">
// Select the container div by its ID
var container = document.getElementById('pancakes');
// Get the input elements in the container
var checkbox = container.getElementsByTagName('input');
// Hide answer by default
document.getElementById("answer-for-pancakes").style.display = 'none';
// Assign a function to onclick property of each checkbox
for (var i=0, len=checkbox.length; i<len; i++) {
if ( checkbox[i].type === 'checkbox' ) {
checkbox[i].onclick = function() {
var check = 0;
for(var j=0; j < checkbox.length; j++) {
if (checkbox[j].checked === false) {
check = 1;
}
}
if(check === 0) {
document.getElementById("answer-for-pancakes").style.display = 'block';
}
else{
document.getElementById("answer-for-pancakes").style.display = 'none';
}
}
}
}
</script>
Make sure the highlighted text in both the markup and the JavaScript matches.
Here is how the complete markup for the contact form editor in Contact Form 7 will look like in the end.
<label> Your Name (required)
[text* your-name] </label>
<label> Your Email (required)
[email* your-email] </label>
<div id="pancakes">What do you think is the greatest risk of getting sick?
[checkbox checkbox-411 use_label_element "Purchase of animals" "Livestock farmers in the area" "Animals in nature areas"]</div>
<p id="answer-for-pancakes">All answers are good. The purchase of animals is the greatest risk, but also in other ways, viruses can enter the livestock.</p>
[submit "Send"]
<script language="javascript" type="text/javascript">
// Select the container div by its ID
var container = document.getElementById('pancakes');
// Get the input elements in the container
var checkbox = container.getElementsByTagName('input');
// Hide answer by default
document.getElementById("answer-for-pancakes").style.display = 'none';
// Assign a function to onclick property of each checkbox
for (var i=0, len=checkbox.length; i<len; i++) {
if ( checkbox[i].type === 'checkbox' ) {
checkbox[i].onclick = function() {
var check = 0;
for(var j=0; j < checkbox.length; j++) {
if (checkbox[j].checked === false) {
check = 1;
}
}
if(check === 0) {
document.getElementById("answer-for-pancakes").style.display = 'block';
}
else{
document.getElementById("answer-for-pancakes").style.display = 'none';
}
}
}
}
</script>