multiple checkbox div 100% height of body - javascript

I have problem to fix height of div that have multiple checkboxes inside, so the height dont be more then 100% of window (body). I try so many staff so im out of solutions. If someone know some tricks to help me with this one, i will be so much pleased
$(".open").on("click", function () {
$("#multiselect-wrap").animate({
left: 0
});
$(".open").hide();
$(".close").show();
});
$(".close").on("click", function () {
$("#multiselect-wrap").animate({
left: -220
});
$(".open").show();
$(".close").hide();
});
#multiselect-wrap {
background-color: #f6f6f6;
width: 200px;
padding: 0 8px 10px 10px;
border: solid 1px #c0c0c0;
position: fixed;
height: 100%;
}
.multiselect {
width: 200px;
height: 100%;
overflow:auto;
border: solid 1px #c0c0c0;
background-color: #fff;
}
.multiselect label {
display:block;
cursor: pointer;
padding: 4px 10px;
}
.multiselect input {
float: right;
cursor: pointer;
}
.multiselect p {
padding-left: 5px;
}
.open, .close {
padding: 10px;
position: absolute;
right: -81px;
width: 100px;
top: 40px;
background-color: #f6f6f6;
border: 1px solid #c0c0c0;
border-top-color: #f6f6f6;
transform: rotate(-90deg);
cursor: pointer;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multiselect-wrap">
<p>Select Criteria(s)</p>
<div class="open">Show Options</div>
<div class="close">Hide Options</div>
<div class="multiselect">
<div class="content">
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
</div>
</div>
</div>

According to me you have to subtract the height of above p tag("Select Criteria(s)") from the height of div that have multiple checkboxes inside. You can achieve this by jquery. I have done small modification in code here
$(".open").on( "click", function() {
$("#multiselect-wrap").animate({left:0});
$(".open").hide();
$(".close").show();
});
$(".close").on( "click", function() {
$("#multiselect-wrap").animate({left: -220});
$(".open").show();
$(".close").hide();
});
var getMultiSelectHeight = $(".multiselect").height();
$(".multiselect").height(getMultiSelectHeight-($(".selectText").outerHeight(true)+20))

There is one solution with CSS. See demo here.
I add below for setting the default html viewport margin 0:
html, body{
margin: 0 auto;
}
and updated .multiselect with CSS3 to calculate the height:
height: calc(100% - 50px); // 50px is <p>'s height including margin
Try to resize the screen in the demo, you will see the height will change dynamically.

Related

Two star rating systems always outputs the ID of the second one's parent ID

The issue is I have two star rating systems. Each star rating system's parent fieldset has a different ID. If the user clicks the first star rating system, I want it to output that parent container's ID and if they click the second star rating system, I want it to output that parent container's ID.
However, both star rating systems output the ID of the second (last) fieldset container.
$(document).on('change', 'input[type="radio"]', function (e) {
console.log($(this).parent().attr('id'));
});
fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.rating {
border: none;
float: left;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating>.half:before {
content: "\f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
color: #FFD700;
}
/* hover previous stars in list */
.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset class="rating" id="93">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
<br><br>
<fieldset class="rating" id="23">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
If you have a look at my question Onclick event runs twice, you will see that the answer was either to :
Give each input a unique ID (since their are two sets of star rating systems)
Change the HTML structure so that each input is inside a label.
Unfortunately none of these really help as the first option isn't convenient to change the ID for each star rating set and with the second option, it mucks up my CSS as seen here Stars (radio button) won't change colour when selected
What should I do?
The problem is indeed duplicate IDs, since you don't want to do it manually (understandable) maybe because there are hundreds or whatever reason. Following approach is post-processing the already generated markup (if you are generating it yourself, just follow the same technique AS you generate them, instead of AFTER).
Like this, each input will have its own unique id and (VERY IMPORTANT!) also will the corresponding label have the necessary for attribute.
Feel free to refactor for efficiency.
$(document).ready(function(){
$('fieldset').each(function(){
var parentId = $(this).attr('id');
$(this).children('input').each(function(){
var newId = $(this).attr('id') + "-" + parentId;
$(this).attr('id', $(this).attr('id') + "-" + parentId);
$(this).next('label').attr('for', newId);
});
});
});
$(document).on('change', 'input[type="radio"]', function (e) {
console.log($(this).parent().attr('id'));
});
fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.rating {
border: none;
float: left;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating>.half:before {
content: "\f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
color: #FFD700;
}
/* hover previous stars in list */
.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset class="rating" id="93">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
<br><br>
<fieldset class="rating" id="23">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>

how can we show/hide div tags using value of radio buttons in jquery or javascript?

hi i am very new to jquery and i am working on show and hide div tags using values of radio buttons. here is my HTML.
<div id="OwnVehicle" style="display:none">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList()" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList()" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
now i need help in writing a jquery code for showing the div tag with id = "two wheeler" when radio button value = 1 and div tag with id = "four wheeler" when radio button value = 2.
thnaks in advance.
sorry for anyone who couldnt understand my question.
try this one
function fuelList(val) {
var val = parseInt(val);
if (val == 1) {
$('#FourWheeler').hide();
$('#TwoWheeler').show();
} else {
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList(this.value)" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList(this.value)" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
Here is what you can do easily with JQuery
$(document).ready(function(){
$("input[name='vehicleList']").click(function(){
var selectedValue = $(this).val();
if(selectedValue === "1"){
$('#TwoWheeler').show();
$('#FourWheeler').hide();
}else{
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
Yiu can try this working code:
function fuelList(_this){
var value=$(_this).attr("value");
$("#TwoWheeler").hide();
$("#FourWheeler").hide();
if(value=="1"){
$("#TwoWheeler").show();
}
else if(value=="2"){
$("#FourWheeler").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList(this)" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList(this)" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
Assuming I understood the question correctly, and you want to hide a div when you check a radio button?
Here is an example of how that can be achieved:
HTML:
<input type="radio" name="euResident" id="euResidentYes" value="Yes" checked />
<label for="euResidentYes" class="radio">yes</label>
<input type="radio" name="euResident" id="euResidentNo" value="No" />
<label for="euResidentNo" class="radio">no</label>
<div id='div'>Hello World</div>
Javascript:
function switchVar() {
if($("#euResidentNo").prop("checked"))
$("#div").show();
else
$("#div").hide();
}
$(document).ready(function() {
switchVar();
$("input[name=euResident]").change(switchVar);
});
It is an example using Javascript as this is perfect to use for this.
Demo: http://jsfiddle.net/2Uj9F/169/
Here you go with jsfiddle https://jsfiddle.net/ym10add9/
$("input[type='radio']").change(function() {
$('div').hide();
$( '#' + $(this).attr('value')).show();
});
My first suggestion is to change your onclick="" to onchange="".
<input type="radio" name="vehicleList" id="four" onchange="fuelList(this)" value="2" class="radioButtons" />Four Wheeler
<script>
function fuelList(element)
{
var id = element.value;
if( id == 1)
{
$(".wheels")hide(); //hides all the elements with class = wheels
$("#twoWheelers")show(); //shows the div with id = twoWheelers
}
else if( id == 2 )
{
$(".wheels")hide(); //hides all the elements with class = wheels
$("#fourWheelers")show(); //shows the div with id = fourWheelers
}
}
</script>
and put a class to the div of your "twoWheeler" and "fourWheeler"
I just make it "wheels"
<div id="twoWheelers" class="wheels">
...
</div>
<div id="fourWheelers" class="wheels">
...
</div>
I wrote code as per you describe in your post. May be useful to solve your problem.
$(document).ready(function() {
$('input[type=radio][name=vehicleList]').change(function() {
if (this.value == '1') {
$("#FourWheeler").hide();
$("#TwoWheeler").show();
}
else if (this.value == '2') {
$("#FourWheeler").show();
$("#TwoWheeler").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vehicleList">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<h5>Output : </h5>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
Below is simple JQuery code that will help you to achieve your requirement:
$("input[name='vehicleList']").on('click', function() {
if ($(this).val() == 1) {
$('#TwoWheeler').show();
$('#FourWheeler').hide();
} else {
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
});
#TwoWheeler,
#FourWheeler {
display: none;
}
#OwnVehicle label,
#TwoWheeler label,
#FourWheeler label {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
This is one way to do it:
$( "#r0" ).bind( "click", function() {
$("#OwnVehicle").show();
$("#TwoWheeler").hide();
});
$( "#r1" ).bind( "click", function() {
$("#OwnVehicle").hide();
$("#TwoWheeler").show();
});
Here a working fiddle
https://jsfiddle.net/0aa8w2sj/
It can be improved

How to display data from database into a checkbox?

guy's i am trying to make my database showing into my checkbox (multi select).
but i dont know how.
i tried to make a code but it didn't work. here is my code.
i hope someone can help me with this and give me an example for the jquery code
$(document).ready(function() {
$.ajax({
type:"POST",
url:"../php/absen/absen_karyawan_autocomplete.php",
success: function(data){
var list = JSON.parse(data);
for(var i=0; i < list.length; i++){
$("#multiselect").append($("<label>").text((list[i]['nama'])).prepend(
$("<input>").attr('type', 'checkbox').val((list[i]['nama'])).prop('checked', true)
));
}
return false;
}
});
});
.multiselect {
width:20em;
height:10em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:#ffffff;
background-color:#000099;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />I want put my database data here </label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
</div>
I have try to make an example for what i need
i just use one json data.
i hope someone can help me to change my code to server side .
i have made the code for server side like the 1st question but i am fail and the data not displaying at my page
var json = [
{
name: "I want to displaying my database data like this",
id: "27",
checked: "true"
}
];
$.each(json, function () {
$("#multiselect").append($("<label>").text(this.name).prepend(
$("<input>").attr('type', 'checkbox').val(this.id)
.prop('checked', this.checked)
));
});
$("#multiselect").on('change', '[type=checkbox]', function () {
console.log($(this).val());
});
.multiselect {
width:20em;
height:10em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:#ffffff;
background-color:#000099;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="multiselect"></div>

How do I set a group of checkboxes using values?

So I have a group of checkboxes, for example:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Now I have an array of values:
var values = ["2", "4", "7", "8"];
Now how do I end up with my group of checkboxes to look like this:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" checked="checked" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" checked="checked" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" checked="checked" />
<input type="checkbox" id="cbl8" name="cbl" value="8" checked="checked" />
Will I have to use two for-loops to do this? Is there a way in plain javascript or jquery that doesn't involve having to loop twice?
API docs demo
var values = ["2", "4", "7", "8"];
$('input[name="cbl"]').val(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Create a selector from the array, and check them all
$( '#cbl' + values.join(', #cbl') ).prop('checked', true);
FIDDLE
This is using the ID's, as that's a better way to select the elements than the values, if you still want to use the values, you can use the same concept
$( '[value="' + values.join('"], [value="') + '"]').prop('checked', true);
FIDDLE
or you can filter
$('input[type="checkbox"]').filter(function() {
return $.inArray(this.value, values) != -1;
}).prop('checked', true);

JavaScript to create a global radio button for all subsequent radio buttons?

I have this set of labels and radio buttons that look like this:
Entertainment: <input type="radio" name="entertainment" id="entertainment" value="0" checked/>
<input type="radio" name="entertainment" id="entertainment" value="1" />
<input type="radio" name="entertainment" id="entertainment" value="2" /><br />
Radio: <input type="radio" name="radio" id="radio" value="0" checked/>
<input type="radio" name="radio" id="radio" value="1" />
<input type="radio" name="radio" id="radio" value="2" /><br />
Dancing: <input type="radio" name="dancing" id="dancing" value="0" checked/>
<input type="radio" name="dancing" id="dancing" value="1" />
<input type="radio" name="dancing" id="dancing" value="2" /><br />
Music: <input type="radio" name="music" id="music" value="0" checked/>
<input type="radio" name="music" id="music" value="1" />
<input type="radio" name="music" id="music" value="2" /><br />
Television: <input type="radio" name="tv" id="tv" value="0" checked/>
<input type="radio" name="tv" id="tv" value="1" />
<input type="radio" name="tv" id="tv" value="2" /><br />
Film: <input type="radio" name="film" id="film" value="0" checked/>
<input type="radio" name="film" id="film" value="1" />
<input type="radio" name="film" id="film" value="2" /><br />
Theatre: <input type="radio" name="theatre" id="theatre" value="0" checked/>
<input type="radio" name="theatre" id="theatre" value="1" />
<input type="radio" name="theatre" id="theatre" value="2" />
The idea is that the three 'Entertainment' radio buttons at the top control all the radio buttons below. A 'global switch', if you will, to save people time. Does anyone know the necessary JavaScript/jQuery to accomplish this? I can't find a correct example online.
$(':radio[name=entertainment]').change(function() {
$(this).nextAll(':radio[value="'+ this.value +'"]').prop('checked', true);
$(this).nextAll(':radio[value!="'+ this.value +'"]').prop('checked', false);
});
Working sample
Note
ids should be unique.

Categories

Resources