This question already has answers here:
Check/Uncheck checkbox with JavaScript
(12 answers)
Closed 5 years ago.
Here i am having two fields
Property Type
Bedroom
Suppose i am i am clicking Property Type is Plot/Site/Land i want to make uncheck for Bedroom, how can do this?
Property Type :
<fieldset class="checkboxes">
<label><input type="checkbox" name="propertyType" value="4" onclick="myFunction()"> Apartment</label>
<label><input type="checkbox" name="propertyType" value="5" onclick="myFunction()"> Independent House/ Villa</label>
<label><input type="checkbox" name="propertyType" value="6" onclick="myFunction()"> Individual House/ Standalone Building</label>
<label><input type="checkbox" name="propertyType" value="7" onclick="myFunction()"> Plot/Site/Land</label>
</fieldset>
Bedroom:
<ul style="padding-left: 0px;">
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 Room/Hall" name="unitType" type="checkbox" onclick="myFunction()">1 Room/Hall</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 RK" name="unitType" type="checkbox" onclick="myFunction()">1 RK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 BHK" name="unitType" type="checkbox" onclick="myFunction()">1 BHK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="2 BHK" name="unitType" type="checkbox" onclick="myFunction()">2 BHK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="3 BHK" name="unitType" type="checkbox" onclick="myFunction()">3 BHK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="4 BHK" name="unitType" type="checkbox" onclick="myFunction()">4 BHK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="4+ BHK" name="unitType" type="checkbox" onclick="myFunction()">4+ BHK</label></li>
</ul>
Register a change() listener on your property type checkbox and uncheck all the unit types.
$(function() {
$("input[name=propertyType]").change(function() {
$("input[name=unitType]").prop("checked", false);
});
});
function myFunction() {
console.log('myfunction called');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Property Type :
<fieldset class="checkboxes">
<label><input type="checkbox" name="propertyType" value="4" onclick="myFunction()"> Apartment</label>
<label><input type="checkbox" name="propertyType" value="5" onclick="myFunction()"> Independent House/ Villa</label>
<label><input type="checkbox" name="propertyType" value="6" onclick="myFunction()"> Individual House/ Standalone Building</label>
<label><input type="checkbox" name="propertyType" value="7" onclick="myFunction()"> Plot/Site/Land</label>
</fieldset>
Bedroom:
<ul style="padding-left: 0px;">
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 Room/Hall" name="unitType" type="checkbox" onclick="myFunction()">1 Room/Hall</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 RK" name="unitType" type="checkbox" onclick="myFunction()">1 RK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 BHK" name="unitType" type="checkbox" onclick="myFunction()">1 BHK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="2 BHK" name="unitType" type="checkbox" onclick="myFunction()">2 BHK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="3 BHK" name="unitType" type="checkbox" onclick="myFunction()">3 BHK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="4 BHK" name="unitType" type="checkbox" onclick="myFunction()">4 BHK</label></li>
<li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="4+ BHK" name="unitType" type="checkbox" onclick="myFunction()">4+ BHK</label></li>
</ul>
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 i want to do while onclick the button i want to uncheck the fields,and i am using data list , in that datalist suppose i selected Marathahalli means except marathahalli remaining all values i want to make uncheck, i tried but here all values are unchecking, how to do if anyone knows means please update my snippet
$('.options').on('change', function() {
var locality = $('#options option[value="' + $('#areaName').val() + '"]').data('id');
$('#locality_id').val(locality);
}).change();
$("#search1").click(function(){
var localityId = $("#locality_id").val();
if(localityId != ''){
$('.myCheckbox').attr('checked', false); // Unchecks it
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input list="options" type="name" class="form-control options" style="height: 34px; width: 100%;border-radius:0px;" name="areaName" id="areaName" placeholder="Locality" rel="" value="">
<datalist id="options">
<option data-id="1" value="Marathahalli"></option>
<option data-id="2" value="Silk Board"></option>
<option data-id="3" value="Jaya Nagar"></option>
<option data-id="5" value="Kadubeesanahalli"></option>
<option data-id="6" value="Bellandur"></option>
<option data-id="7" value="Kundalahalli"></option>
<option data-id="8" value="JP nagar"></option>
</datalist>
<input type="hidden" name="localityId" id="locality_id" value="">
<button id="search1" type="button">Click Me!</button>
<form id="filterForm">
<ul style="padding-left: 0px;">
<li><label class="space"><input type="checkbox" name="localityId" value="1" checked="" onclick="myFunction()" class="myCheckbox">Marathahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="2" checked="" onclick="myFunction()" class="myCheckbox">Silk Board</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="3" checked="" onclick="myFunction()" class="myCheckbox">Jaya Nagar</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="5" checked="" onclick="myFunction()" class="myCheckbox">Kadubeesanahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="6" checked="" onclick="myFunction()" class="myCheckbox">Bellandur</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="7" checked="" onclick="myFunction()" class="myCheckbox">Kundalahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="8" checked="" onclick="myFunction()" class="myCheckbox">JP nagar</label></li>
</ul>
</form>
This is happening because you are explicitly marking all of them as unchecked and not filtering them. Modified you code.
$('.options').on('change', function() {
var locality = $('#options option[value="' + $('#areaName').val() + '"]').data('id');
$('#locality_id').val(locality);
}).change();
$("#search1").click(function(){
var localityId = $("#locality_id").val();
if(localityId != ''){
$('.myCheckbox').each(function () {
if (localityId === $(this).val()) {
$(this).attr('checked', true);
} else {
$(this).attr('checked', false);
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input list="options" type="name" class="form-control options" style="height: 34px; width: 100%;border-radius:0px;" name="areaName" id="areaName" placeholder="Locality" rel="" value="">
<datalist id="options">
<option data-id="1" value="Marathahalli"></option>
<option data-id="2" value="Silk Board"></option>
<option data-id="3" value="Jaya Nagar"></option>
<option data-id="5" value="Kadubeesanahalli"></option>
<option data-id="6" value="Bellandur"></option>
<option data-id="7" value="Kundalahalli"></option>
<option data-id="8" value="JP nagar"></option>
</datalist>
<input type="hidden" name="localityId" id="locality_id" value="">
<button id="search1" type="button">Click Me!</button>
<form id="filterForm">
<ul style="padding-left: 0px;">
<li><label class="space"><input type="checkbox" name="localityId" value="1" checked="" onclick="myFunction()" class="myCheckbox">Marathahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="2" checked="" onclick="myFunction()" class="myCheckbox">Silk Board</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="3" checked="" onclick="myFunction()" class="myCheckbox">Jaya Nagar</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="5" checked="" onclick="myFunction()" class="myCheckbox">Kadubeesanahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="6" checked="" onclick="myFunction()" class="myCheckbox">Bellandur</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="7" checked="" onclick="myFunction()" class="myCheckbox">Kundalahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="8" checked="" onclick="myFunction()" class="myCheckbox">JP nagar</label></li>
</ul>
</form>
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.
<!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>" );
I have following HTML with two ULs.
Click
<ul class="plan none">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold" checked="checked">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold">
</label> <strong>100 ₪</strong>
</li>
</ul>
<hr />
<ul class="plan">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold_two">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold_two">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold_two">
</label> <strong>100 ₪</strong>
</li>
</ul>
First UL is with display: none and have one radio button is selected by default and Second UL is without selected.
Now I want get selected radio button value from visible UL.
Here is my jQuery Code:
$("#detail_buttons").click(function () {
if ($(".plan input[type='radio']:checked").val() != undefined) {
alert($(".plan input[type='radio']:checked").val());
}
});
My JSFiddle: Sample
Any Idea?
Thanks.
Use this way:
$(".plan:visible").find("input:radio:checked").val();
Snippet
$("#detail_buttons").click(function () {
alert($(".plan:visible").find("input:radio:checked").val());
return false;
});
.none {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Check Value
<ul class="plan none">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold" checked="checked">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold">
</label> <strong>100 ₪</strong>
</li>
</ul>
<hr />
<ul class="plan">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold_two">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold_two">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold_two">
</label> <strong>100 ₪</strong>
</li>
</ul>