<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.structure.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css">
<!--css-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script><!--test jquery-->
function myFunction() {
var obj = document.getElementById("h01");
obj.innerHTML = "Hello jQuery";
}
onload = myFunction;
</script><!--test jquery fine-->
<script>
$(function(){
$('#show-back').hide();
$('#formid').on('click' ,'input[type=radio]', function(){
if (this.id == "retro" && this.checked) {
$('#show-back').show();
} else {
$('#show-back').hide();
}
});
});
$(function (){
$('#show-sx').hide();
$('#formid').on('click' ,'input[type=radio]', function(){
if (this.id == "sx" && this.checked) {
$('#show-sx').show();
} else {
$('#show-sx').hide();
}
});
});
$(function(){
$('#show-dx').hide();
$('#formid').on('click' ,'input[type=radio]', function(){
if (this.id == "dx" && this.checked) {
$('#show-dx').show();
} else {
$('#show-dx').hide();
}
});
});
</script>
</head>
<body>
<?php
echo 'test php' ;
?>
<div id="h01">
</div>
<form action="ricezione.php" method="POST" id="formid">
<p>FRONTE</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sul Fronte della t-shirt.</p>
<ul>
<li><input type="radio" name="stampafronte" value="Nessuna Stampa" checked>Nessuna stampa</li>
<li><input type="radio" name="stampafronte" value="1 colore" id="fronte">Stampa a 1 colore</li>
<li><input type="radio" name="stampafronte" value="2 colori" id="fronte">Stampa a 2 colore </li>
<li><input type="radio" name="stampafronte" value="3 colori" id="fronte">Stampa a 3 colore </li>
<li><input type="radio" name="stampafronte" value="4 colori" id="fronte">Stampa a 4 colore </li>
<li><input type="radio" name="stampafronte" value="5 colori" id="fronte">Stampa a 5 colore </li>
<li><input type="radio" name="stampafronte" value="6 colori" id="fronte">Stampa a 6 colore</li><hr>
<li><input type="radio" name="stampafronte" value="6 colori" id="fronte">Ricamo</li>
</ul>
<span>
<p>RETRO</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sul Retro della t-shirt.</p>
<ul>
<li><input type="radio" name="stamparetro" value="Nessuna Stampa" checked>Nessuna stampa</li>
<li><input type="radio" name="stamparetro" value="1 colore" id="retro">Stampa a 1 colore</li>
<li><input type="radio" name="stamparetro" value="2 colori" id="retro">Stampa a 2 colore </li>
<li><input type="radio" name="stamparetro" value="3 colori" id="retro">Stampa a 3 colore </li>
<li><input type="radio" name="stamparetro" value="4 colori" id="retro">Stampa a 4 colore </li>
<li><input type="radio" name="stamparetro" value="5 colori" id="retro">Stampa a 5 colore </li>
<li><input type="radio" name="stamparetro" value="6 colori" id="retro">Stampa a 6 colore</li><hr>
<li><input type="radio" name="stamparetro" value="6 colori" id="retro">Ricamo</li>
</ul>
</span>
<p>SPALLA SINISTRA</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sulla spalla sinistra</p>
<ul>
<li><input type="radio" name="stampasinistra" value="Nessuna Stampa" checked>Nessuna stampa</li>
<li><input type="radio" name="stampasinistra" value="1 colore" id="sx">Stampa a 1 colore</li>
<li><input type="radio" name="stampasinistra" value="2 colori" id="sx">Stampa a 2 colore </li>
<li><input type="radio" name="stampasinistra" value="3 colori" id="sx">Stampa a 3 colore </li>
<li><input type="radio" name="stampasinistra" value="4 colori" id="sx">Stampa a 4 colore </li>
<li><input type="radio" name="stampasinistra" value="5 colori" id="sx">Stampa a 5 colore </li>
<li><input type="radio" name="stampasinistra" value="6 colori" id="sx">Stampa a 6 colore</li><hr>
<li><input type="radio" name="stampasinistra" value="6 colori" id="sx">Ricamo</li>
</ul>
<p>SPALLA DESTRA</p>
<p>Seleziona il tipo di personalizzazione che vuoi effettuare sulla spalla destra</p>
<ul>
<li><input type="radio" name="stampadestra" value="Nessuna Stampa" checked>Nessuna stampa</li>
<li><input type="radio" name="stampadestra" value="1 colore" id="dx">Stampa a 1 colore</li>
<li><input type="radio" name="stampadestra" value="2 colori" id="dx">Stampa a 2 colore </li>
<li><input type="radio" name="stampadestra" value="3 colori" id="dx">Stampa a 3 colore </li>
<li><input type="radio" name="stampadestra" value="4 colori" id="dx">Stampa a 4 colore </li>
<li><input type="radio" name="stampadestra" value="5 colori" id="dx">Stampa a 5 colore </li>
<li><input type="radio" name="stampadestra" value="6 colori" id="dx">Stampa a 6 colore</li><hr>
<li><input type="radio" name="stampadestra" value="6 colori" id="dx">Ricamo</li>
</ul>
<p>Cambio</p>
<!-- cambio fronte-->
<div id="show_front">
<ul>
<li><input type="radio" name="cambio" value="Nessun Cambio" checked>Nessun cambio</li>
<li><input type="radio" name="cambio" value="1colore" >1 colore</li>
<li><input type="radio" name="cambio" value="2colore" >2 colori</li>
<li><input type="radio" name="cambio" value="3colore" >3 colori</li>
<li><input type="radio" name="cambio" value="4colore" >4 colori</li>
<li><input type="radio" name="cambio" value="5colore" >5 colori</li>
<li><input type="radio" name="cambio" value="6colore" >6 colori</li>
</ul>
</div>
<!-- cambio fronte fine-->
<!-- cambio retro-->
<div>
<div id="show-back">
<p> Dietro </p>
<ul>
<li><input type="radio" name="cambio_r" value="Nessun Cambio" >Nessun cambio</li>
<li><input type="radio" name="cambio_r" value="1colore" >1 colore</li>
<li><input type="radio" name="cambio_r" value="2colore" >2 colori</li>
<li><input type="radio" name="cambio_r" value="3colore" >3 colori</li>
<li><input type="radio" name="cambio_r" value="4colore" >4 colori</li>
<li><input type="radio" name="cambio_r" value="5colore" >5 colori</li>
<li><input type="radio" name="cambio_r" value="6colore" >6 colori</li>
</ul>
</div>
</div>
<!-- cambio sinistra fine -->
<!-- cambio sinistra-->
<div id="show-sx">
<p>Sinistra</p>
<ul>
<li><input type="radio" name="cambio_s" value="Nessun Cambio" >Nessun cambio</li>
<li><input type="radio" name="cambio_s" value="1colore" >1 colore</li>
<li><input type="radio" name="cambio_s" value="2colore" >2 colori</li>
<li><input type="radio" name="cambio_s" value="3colore" >3 colori</li>
<li><input type="radio" name="cambio_s" value="4colore" >4 colori</li>
<li><input type="radio" name="cambio_s" value="5colore" >5 colori</li>
<li><input type="radio" name="cambio_s" value="6colore" >6 colori</li>
</ul>
</div>
<!-- cambio sinistra fine -->
<!-- cambio destra-->
<div id="show-dx">
<p>Destra</p>
<ul>
<li><input type="radio" name="cambio_d" value="Nessun Cambio" >Nessun cambio</li>
<li><input type="radio" name="cambio_d" value="1colore" >1 colore</li>
<li><input type="radio" name="cambio_d" value="2colore" >2 colori</li>
<li><input type="radio" name="cambio_d" value="3colore" >3 colori</li>
<li><input type="radio" name="cambio_d" value="4colore" >4 colori</li>
<li><input type="radio" name="cambio_d" value="5colore" >5 colori</li>
<li><input type="radio" name="cambio_d" value="6colore" >6 colori</li>
</ul>
</div>
<!-- cambio destra fine -->
<button type="submit">Invia</button>
</form>
</body>
</html>
I searched and read other questions but I solved the problem , if I choose , for example, " sinistra q colore " appears in a div with no choice for the "sinistra " . but even if I choose " destra 1colore " the div is replaced with options to destra. I would add no substitute .how can I do , thanks for the help ,
See append.
Example:
$( "#id" ).append( "<div>New div</div>" );
Related
So, I want to create a dropdown with values: Monthly, Quarterly, Yearly, and the values that the user chooses those dropdown appear on the screen.
So my HTML is :
<div id="listmain" class="dropdown-check-list" tabindex="1" onchange="show();">
<span class="anchor" onclick="getElements('listmain')">Select Criteria</span>
<ul id="listmain_items" class="items">
<li><input type="checkbox" name="main" value="month" id="month"><label for="month">Monthly </label></li>
<li><input type="checkbox" name="main" value="quarter" id="quarter"><label for="quarter">Quartely</label></li>
<li><input type="checkbox" name="main" value="year" id="year"><label for="year">Yearly</label></li>
</ul>
</div>
<div id="list1" class="dropdown-check-list" tabindex="1">
<span class="anchor" onclick="getElements('list1')">Select Months</span>
<ul id="list1_items" class="items" style="display: none;">
<li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
<li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
<li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
<li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
<li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
<li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
<li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
<li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
<li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
<li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
<li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
<li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>
</ul>
</div>
<div id="list2" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list2')">Select Quarter</span>
<ul id="list2_items" class="items">
<li><input type="checkbox" name="quarter" value="Quarter1" id="Q1"><label for="Q1">Apr - Jun (Quarter 1) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter2" id="Q2"><label for="Q2">Jul - Sep (Quarter 2) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter3" id="Q3"><label for="Q3">Oct - Dec (Quarter 3) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter4" id="Q4"><label for="Q4">Jan - Mar (Quarter 4) </label></li>
</ul>
</div>
<div id="list3" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list3')">Select Monthly/Yearly</span>
<ul id="list3_items" class="items">
<li><input type="checkbox" value="April">6 Months </li>
<li><input type="checkbox" value="01">Year</li>
</ul>
</div>
<div id="list4" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list4')">Select Year</span>
<ul id="list4_items" class="items">
<li><input type="checkbox" name="year" value="2021">2021-2022 </li>
<!-- <li><input type="checkbox" name="year" value="2021" />2021</li> -->
</ul>
</div>
So I want to hide all of these and show a dropdown with checkbox of the following(Monthly,Quartely,Yearly) values and as the user selects from these, the particular dropdown appears.
You want something like this?
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
<select>
<option value="criteria">Select Criteria</option>
<option value="quarter">Select Quarter</option>
<option value="monthly">Select Monthly/Yearly</option>
<option value="year">Select Year</option>
</select>
</div>
<div class="criteria box">
<ul id="listmain_items" class="items">
<li><input type="checkbox" name="main" value="month" id="month">
<label for="month">Monthly </label></li>
<li><input type="checkbox" name="main" value="quarter" id="quarter">
<label for="quarter">Quartely</label></li>
<li><input type="checkbox" name="main" value="year" id="year">
<label for="year">Yearly</label></li>
</ul>
</div>
<div class="quarter box">
<ul>
<li><input type="checkbox" name="quarter" value="Quarter1" id="Q1">
<label for="Q1">Apr - Jun (Quarter 1) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter2" id="Q2">
<label for="Q2">Jul - Sep (Quarter 2) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter3" id="Q3">
<label for="Q3">Oct - Dec (Quarter 3) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter4" id="Q4">
<label for="Q4">Jan - Mar (Quarter 4) </label></li>
</ul>
</div>
<div class="monthly box">
<ul>
<li><input type="checkbox" name="month" value="Apr-2021" id="apr">
<label for="apr">April</label> </li>
<li><input type="checkbox" name="month" value="May-2021" id="may">
<label for="may">May</label> </li>
<li><input type="checkbox" name="month" value="Jun-2021" id="jun">
<label for="jun">June</label> </li>
<li><input type="checkbox" name="month" value="Jul-2021" id="jul">
<label for="jul">July</label></li>
<li><input type="checkbox" name="month" value="Aug-2021" id="aug">
<label for="aug">August</label></li>
<li><input type="checkbox" name="month" value="Sep-2021" id="sep">
<label for="sep">September</label></li>
<li><input type="checkbox" name="month" value="Oct-2021" id="oct">
<label for="oct">October</label></li>
<li><input type="checkbox" name="month" value="Nov-2021" id="nov">
<label for="nov">November</label></li>
<li><input type="checkbox" name="month" value="Dec-2021" id="dec">
<label for="dec">December</label></li>
<li><input type="checkbox" name="month" value="Jan-2021" id="jan">
<label for="jan">January</label> </li>
<li><input type="checkbox" name="month" value="Feb-2021" id="feb">
<label for="feb">February</label></li>
<li><input type="checkbox" name="month" value="Mar-2021" id="mar">
<label for="mar">March</label> </li>
</ul>
</div>
<div class="year box">
<ul>
<li><input type="checkbox" value="6-months">6 Months </li>
<li><input type="checkbox" value="year">Year</li>
<li><input type="checkbox" name="year" value="2021">2021-2022 </li>
<li><input type="checkbox" name="year" value="2021" />2021</li>
</ul>
</div>
Here is my html code which requires some update like span or something which can let it hide all child elements to display children on click only for individual parent.
how can I add toggle span and javascript to make it show on click only specific child of each parent not all of them at once.
i am too beginner with javascript so no idea how can this be done please help me out how can i resolve this issue it will save my life. Thanks a lot
<div class=" col-lg-4 col-md-9 col-sm-8" id="Permission">
<ul id="Div1" class="tree">
<li class="has">
<input type="checkbox" name="Dashboard" value="yes"> Dashboard
<ul> </ul>
</li>
</ul>
<ul id="Div2" class="tree">
<li class="has" "="">
<input type="checkbox" name="Master" value="yes"> Master
<ul>
<li>
<input type="checkbox" id="Upper1 name=" menus-accesscontrol[9]"="" value="9"> AccessControl
<ul id="Parent1">
<li>
<input type="checkbox" name="Menus-User[3]" value="3"> User
<ul class="childs">
<li><input type="checkbox" name="UserAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="UserAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="UserAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-Menu[6]" value="6"> Menu
<ul class="childs">
<li><input type="checkbox" name="MenuAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="MenuAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="MenuAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="MenuAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-Group[23]" value="23"> Group
<ul class="childs">
<li><input type="checkbox" name="GroupAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="GroupAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="GroupAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="GroupAllowView" value="0"> Allow View </li>
</ul>
</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-CustomerMaster[2]" value="2"> CustomerMaster
<ul class="childs">
<li><input type="checkbox" name="CustomerMasterAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerMasterAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="CustomerMasterAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="CustomerMasterAllowView" value="0"> Allow View</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<ul id="Div3" class="tree">
<li class="has" "="">
<input type="checkbox" name="Inventory" value="yes"> Inventory
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-UserRecharge[8]" value="8"> UserRecharge
<ul class="childs">
<li><input type="checkbox" name="UserRechargeAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserRechargeAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="UserRechargeAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="UserRechargeAllowView" value="0"> Allow View</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-SupplierInventory[43]" value="43"> SupplierInventory
<ul class="childs">
<li><input type="checkbox" name="SupplierInventoryAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SupplierInventoryAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="SupplierInventoryAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="SupplierInventoryAllowView" value="0"> Allow View</li>
</ul>
<li>
<input type="checkbox" id="Upper2 name=" menus-report[30]"="" value="30"> Report
<ul id="Parent2">
<li>
<input type="checkbox" name="Menus-CustomerException[31]" value="31"> CustomerException
<ul class="childs">
<li><input type="checkbox" name="CustomerExceptionAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerExceptionAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="CustomerExceptionAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="CustomerExceptionAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SuplierException[33]" value="33"> SuplierException
<ul class="childs">
<li><input type="checkbox" name="SuplierExceptionAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SuplierExceptionAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SuplierExceptionAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SuplierExceptionAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SupplierReport[34]" value="34"> SupplierReport
<ul class="childs">
<li><input type="checkbox" name="SupplierReportAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SupplierReportAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SupplierReportAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SupplierReportAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SenderSupplierSummary[35]" value="35"> SenderSupplierSummary
<ul class="childs">
<li><input type="checkbox" name="SenderSupplierSummaryAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-MonthlySale[39]" value="39"> MonthlySale
<ul class="childs">
<li><input type="checkbox" name="MonthlySaleAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="MonthlySaleAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="MonthlySaleAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="MonthlySaleAllowView" value="0"> Allow View </li>
</ul>
</li>
</ul>
</li>
</li> </li> </li> </li> </li> </li> </li> </li> </li> </li>
</ul>
</li>
</ul>
<ul id="Div4" class="tree">
<li class="has" "="">
<input type="checkbox" name="Invoice" value="yes"> Invoice
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-CustomerInvoice[44]" value="44"> CustomerInvoice
<ul class="childs">
<li><input type="checkbox" name="CustomerInvoiceAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerInvoiceAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="CustomerInvoiceAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="CustomerInvoiceAllowView" value="0"> Allow View</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id="Div5" class="tree">
<li class="has" "="">
<input type="checkbox" name="Contract Management" value="yes"> Contract Management
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-Configuration[45]" value="45"> Configuration
<ul class="childs">
<li><input type="checkbox" name="ConfigurationAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="ConfigurationAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="ConfigurationAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="ConfigurationAllowView" value="0"> Allow View</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-Contract[47]" value="47"> Contract
<ul class="childs">
<li><input type="checkbox" name="ContractAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="ContractAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="ContractAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="ContractAllowView" value="0"> Allow View</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</div>
You can use the 'toggleClass' in jQuery though there are other ways base on your needs. But you can check this basic example so that you can have an idea.
$(".root").on("click", function(){
$(this).find("ul").toggleClass("hide-children");
})
Sample 1 Fiddle: https://jsfiddle.net/nq5ecbLu/1/
Sample 2 Fiddle: https://jsfiddle.net/mt10aeg7/
I have some quizzes, like I showed below. Each Quiz ends with submit and reset button. The problem here is, if I click submit button in a quiz it shows the other quiz answer too.
Can someone help me to prevent showing the answer other than active quiz div
<div id="quiz-1" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<div id="quiz-2" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<div id="quiz-3" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<!--- HTML CODE --->
<div id="quiz-1" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-1 -->
<div id="quiz-2" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-2 -->
<div id="quiz-3" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-3 -->
$('.btn1').on('click', chkd_answer);
$('.btn2').on('click', reset);
function chkd_answer() {
var chkd_optn = $('input:checked');
var correct = $("li.correct");
var wrong = chkd_optn.parent("li").not(".correct");
if (chkd_optn.length < 3) {
$('.ans_all').fadeIn(1000).fadeOut(800);
} else {
$('.expn').slideToggle();
correct.toggleClass('g-class'); // adding green
wrong.toggleClass('r-class'); // adding red
}
}
function reset(){
var chkd_optn = $('input:checked');
chkd_optn.prop("checked", false);
$('.expn').slideUp();
$('li').removeClass('g-class r-class');
}
Try replacing your function with the below one:
function chkd_answer() {
var currentButton = $(this);
var chkd_optn = $('input:checked');
var correct = $("li.correct");
var wrong = chkd_optn.parent("li").not(".correct");
if (chkd_optn.length < 3) {
$('.ans_all').fadeIn(1000).fadeOut(800);
} else {
$(currentButton).closest(".quiz").find('.expn').slideToggle(); // searching the associated .expn element to show it
correct.toggleClass('g-class'); // adding green
wrong.toggleClass('r-class'); // adding red
}
}
Also all your code show work with the associated option buttons from where the button has been clicked. So please check your rest of the code too.
I'm trying to make a test with randomized questions(randomize the ordered list) that contain randomized answers(randomize the unordered lists). I can get the ordered list to randomize, but I can only get one unordered list to randomize. The code only randomizes the first unordered list it finds. I would like to randomize all the unordered lists. Any help is appreciated.
<ol>
<li>What are the three main areas of the Standard User Interface?
<ul type="none">
<li><input type="radio" name="q1" value="0" />A. Header, Banner, Frame, Application Window</li>
<li><input type="radio" name="q1" value="0" />B. Content Frame, Homepage, Form </li>
<li><input type="radio" name="q1" value="1" />C. Application Navigator, Banner Frame, Content Frame </li>
<li><input type="radio" name="q1" value="0" />D. None of the above</li>
</ul>
</li>
<li>In the User interface, what is the gray toolbar called which allows you to add bookmarks?<br/>
<ul type="none">
<li><input type="radio" name="g2" value="0" />A. Gauge</li><br />
<li><input type="radio" name="g2" value="1" />B. Edge</li><br />
<li><input type="radio" name="g2" value="0" />C. Remedy</li><br />
<li><input type="radio" name="g2" value="0" />D. Banner</li><br />
</ul><br/>
</li>
<li>What can be captured in an update set?<br/>
<ul type="none">
<li><input type="radio" name="g3" value="0" />A. Modified CI Rules</li><br />
<li><input type="radio" name="g3" value="1" />B. Business Rules</li><br />
<li><input type="radio" name="g3" value="0" />C. Scheduled Jobs</li><br />
<li><input type="radio" name="g3" value="0" />D. None of the above</li><br />
</ul>
</li>
<li>What should you always do before you commit an update set?<br/>
<ul type="none">
<li><input type="radio" name="g4" value="1" />A. Preview</li><br />
<li><input type="radio" name="g4" value="0" />B. Merge</li><br />
<li><input type="radio" name="g4" value="0" />C. Ignore</li><br />
<li><input type="radio" name="g4" value="0" />D. All of the above</li><br />
</ul>
</li>
<li>Which of the following is a Business Rule best pratice?<br/>
<ul type="none">
<li><input type="radio" name="g5" value="1" />A. Make business rules small and specific</li><br />
<li><input type="radio" name="g5" value="0" />B. Use of conditions is not necessary</li><br />
<li><input type="radio" name="g5" value="0" />C. Global business rules should be used</li><br />
<li><input type="radio" name="g5" value="0" />D. None of the above</li><br />
</ul>
</li>
<li>Which of the following is a Client Script best practice?<br/>
<ul type="none">
<li><input type="radio" name="g6" value="0" />A. Use hard coded data</li><br />
<li><input type="radio" name="g6" value="0" />B. Maximize server lookup</li><br />
<li><input type="radio" name="g6" value="1" />C. Do not use g_form.getReference()</li><br />
<li><input type="radio" name="g6" value="0" />D. All of the above</li><br />
</ul>
</li>
<li>Which of the following are debugging features?<br/>
<ul type="none">
<li><input type="radio" name="g7" value="0"/>A. Debug Business Rule</li><br />
<li><input type="radio" name="g7" value="0"/>B. Javascript</li><br />
<li><input type="radio" name="g7" value="1"/>C. A and B</li><br />
<li><input type="radio" name="g7" value="0"/>D. None of the above</li><br />
</ul>
</li>
</ol>
Here is my randomization code:
var ol = document.querySelector('ol');
temp = ol.cloneNode(true);
for (var i = temp.children.length; i--; ){
temp.appendChild( temp.children[Math.random() * i |0] );
ul.parentNode.replaceChild(temp, ol);
}
var ul = document.querySelector('ul');
temp = ul.cloneNode(true);
for (var i = temp.children.length + 1; i--; ){
temp.appendChild( temp.children[Math.random() * I |0] );
ul.parentNode.replaceChild(temp, ul);
}
document.querySelector() works for the ol element because there is only one. To capture the uls use querySelectorAll and loop through value of same. There is also a problem in that the parent nodes of ol and ul get lost. The parentNode.replaceChild... statements have to come after, not within, the for loops. In the loop over the querySelectorAll value, the parent node has to be backed up; see setting parent node in javascript
var ol = document.querySelector('ol');
temp = ol.cloneNode(true);
for (var i = temp.children.length; i--;) {
temp.appendChild(temp.children[Math.random() * i | 0]);
}
ol.parentNode.replaceChild(temp, ol);
var ul = document.querySelectorAll('ul'), parent;
console.log("found " + ul.length + " ul's");
for (var k = ul.length-1; k >= 0; k--) {
parent = ul[k].parentNode;
temp = ul[k].cloneNode(true);
for (var i = temp.children.length + 1; i--;) {
temp.appendChild(temp.children[Math.random() * i | 0]);
}
parent.replaceChild(temp, ul[k]);
}
I'm trying to make a list of radio buttons that contain a group of check boxes and these in turn contain another group checkboxes:
My code works fine when I use in one radio button. If I select another one JS is returned something strange, and I do not know how to fix it.
Here is my code:
HTML
<ul>
<li class="radio">
<input type="radio" name="level-1">submenu1.1
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.1.1
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.1.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.1.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.2
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.2.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.2.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.3
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.3.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.3.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.4
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.4.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.4.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.4.3</li>
</ul>
</li>
</ul>
</li>
<br>
<li class="radio">
<input type="radio" name="level-1" value="submenu">submenu1.2
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.2.1
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.1.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.1.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.2
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.2.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.2.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.3
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.3.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.3.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.4
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.4.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.4.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.4.3</li>
</ul>
</li>
</ul>
</li>
<br>
<li class="radio">
<input type="radio" name="level-1">submenu1.3
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.3.1
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.2
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.3
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.4
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
$(document).ready(function() {
$("li:not(.radio)").hide();
$("input[name='level-1']").change(function() {
console.log(this);
$("li:not(.radio)").hide();
var $val = $(this).next("ul").children("li");
$val.slideToggle("fast");
$val.next("ul").children("li").hide();
$("input[type=checkbox][name='level-2']").click(function (event) {
$(this).next("ul").children("li").slideToggle("fast");
var checked = $(this).is(':checked');
if (!checked) {
$(this).parent().find("input[type=checkbox][name='level-3']").prop("checked", false);
}
});
});
});
http://jsfiddle.net/benatespina/Et95z/
It is happening because you are triggering level-2 change event inside level-1 change event.
Write them separately.
Write:
$("li:not(.radio)").hide();
$("input[name='level-1']").change(function () {
console.log(this);
$("li:not(.radio)").hide();
var $val = $(this).next("ul").children("li");
$val.slideToggle("fast");
$val.next("ul").children("li").hide();
$("input[type=checkbox][name='level-2']:checked").removeAttr("checked");
});
$("input[type=checkbox][name='level-2']").change(function (event) {
$(this).next("ul").find("li").slideToggle("fast");
var checked = $(this).is(':checked');
if (!checked) {
$(this).parent().find("input[type=checkbox][name='level-3']").prop("checked", false);
}
});
Updated fiddle here.