I am attempting to make a page which depending on which checkboxes are checked, the corresponding divs/values will be displayed. If the red checkbox is checked, then the red div will be displayed. If the blue radio is checked, the blue div will display. If blue and green are checked, then the blue and green divs will show but not the red. If the all check box is clicked, everything will show again so we can then repeat the process which means that all are showing but if i click the blue check box, then only blue will show and everything else won't until i click an additional value - so if blue and red are clicked then blue and red will show but not the green as that hasn't been clicked. If the blue is unchecked, then only the red will be showing
I've been working on this for a few days and I feel that I've hit my wall. If a check box is checked, I want that value to show, so if 'all', 'red', and 'green' are checked, then 'red', 'green', and 'blue' would show because the 'all' check box has been checked. If all is unchecked, then the blue div should vanish because it is not checked. I've been using google, lydna.com, and stack to get myself to where I currently am, but i'm not able to get the all aspect to work as I was hoping.
I started with links and am now using checkboxes. If you click one of the boxes, it shows the corresponding values. I want all the divs with the 'all' class to show on initial page load. I have figured out how to show that which is checked.
I have the .all class set to display initially, as that was how i could get everything to show on initial load. I've hit my wall and i'm hoping for help with this. And I have looked through the stacks and read many examples, but nothing I've found seems to compare to what I am trying to do.
FYI: Student / newb here with the most rudimentary understanding of javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Elements Using Checkboxes</title>
<!--CSS stylesheet-->
<style>
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.all{display: block;}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
label {
margin-right: 15px;
}
</style>
<!--import jQuery cdn-->
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>
// Enable-Disable text input when checkbox is checked or unchecked
// on initial page load, all is checked so everything shows
// if all clicked - show all, if all not checked, remove all that have no other checked values
// jQuery functions to show and hide divisions
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
</head>
<body>
<input type="hidden" name="all" value="false">
<div>
<!--checkboxes-->
<label><input type="checkbox" id="checkbox"
name="colorCheckbox" value="all" checked="true">
all
</label>
<label><input type="checkbox"
name="colorCheckbox" value="red">
red
</label>
<label><input type="checkbox"
name="colorCheckbox" value="green">
green
</label>
<label><input type="checkbox"
name="colorCheckbox" value="blue">
blue
</label>
</div>
<!--Divisions to be shown and hidden-->
<div class="all red box">all Red Selected</div>
<div class="all green box">all Green Selected</div>
<div class="all blue box">all Blue Selected</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire