Create clickable bootstrap panel that toggles a checkbox, as well as activates the link that is used to open the body. Such that the body is expanded and collapsed.
Can anyone tell me if this is possible, because I can not get the check box to check when clicking on it or it's label, due to the browser not knowing which one to handle, the label tag, or the a tag, but I want it to do both.
GOAL:
-
whenever user clicks on the panel, have it open (already meet)
-
whenever user clicks on the panel, have the checkbox be checked.
Additional Problem: after this issue, I would like to have a way to have all checkboxes selected/unselected when checking the main one, i.e. inside of the panel body i have a sub group of list with checkboxes next to them, just as is the case with this one, and whenever the checkbox mentioned here is checked the sub group checkboxes should also be checked, I will need this to work with or without javascript, or at least have a feasible solution if javascript is not enabled. I have considered just having every checkbox selected by default, but that still would not add the interactivity of toggling them with the main checkbox.
Another issue: The main checkbox should be checked if any sub group check boxes are checked.
<!doctype html>
<?php require("connect.php"); ?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>some title here</title>
<link rel="stylesheet" href="http://ift.tt/1K1B2rp">
<script src="http://ift.tt/1LdO4RA"></script>
<script src="http://ift.tt/1InYcE4"></script>
<style>
.panel{border-radius: 7px; border: 1px solid #c8c8c8}
h1.lead{font-size: 30px;}
</style>
</head>
<body>
<?php
$name = "this_one";
$id = "1";
$checkbox = "<input type=checkbox name='";
$vcheckbox = "' value='";
$icheckbox = "' id= '";
$ccheckbox = "'>";
echo "
<label for=$name>
<a role='button' data-toggle='collapse' data-parent='#accordion' href='#$id' aria-expanded='true' aria-controls='collapseOne'>
<div class='panel'>
<div class='panel-heading' role='tab' id='headingOne'>
<h4 class='panel-title' display: inline;>".
$checkbox.$name.$checkbox.$icheckbox.$name.$vcheckbox.$id.$ccheckbox.
$name."
</h4>
<input type='text' name='$name'placeholder='enter some text here' style='display: inline;'>
</div></div></a></label>
<div class=panel-body>";
?>
</body>
</html>
Just incase anyone is confused, I have a four loop that iterates through a mysql table and I am using php to echo a list of items in a panel, I have all of the html and php written and working already but i am having this one small issue. Maybe there is a different way to go about doing this, I just can not think of it. Additionally, I know that javascript can be used to handle this issue, however, while javascript is an option, I would also need a fallback that accomplishes the same thing.
And just to clarify this question is not, "can i wrap a content in both a label and link tag, but rather, if I can not do so then how would I accomplish my goal".
Thanks for any help :)
Aucun commentaire:
Enregistrer un commentaire