please can you help me with my checkbox, because i used generator for create checkbox and all work but i need configuare min and max select for this checkbox in javascript. I used most thing for it and nothing work a i still can select all but i need only one check from three.
Script:
<script type="text/javascript">
var limit = 1;
$('input.css-checkbox + label.css-label').on('change', function (evt) {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
</script>
HTML
<table style="border-spacing: 5px; border-collapse: separate;">
<tr>
<td>
<input type="checkbox" name="check_lang" id="check_cz" class="css-checkbox" />
<label for="check_cz" class="css-label"><img src="http://terquil.cz/images/cz.png" class="img-flag" alt="CZ" /></label>
</td>
<td><h2>CZ</h2></td>
</tr>
<tr>
<td>
<input type="checkbox" name="check_lang" id="check_en" class="css-checkbox" />
<label for="check_en" class="css-label"><img src="http://terquil.cz/images/uk.png" class="img-flag" alt="EN" /></label>
</td>
<td><h2>EN</h2></td>
</tr>
<tr>
<td>
<input type="checkbox" name="check_lang" id="check_de" class="css-checkbox" />
<label for="check_de" class="css-label"><img src="http://terquil.cz/images/de.png" class="img-flag" alt="DE" /></label>
</td>
<td><h2>DE</h2></td>
</tr>
</table>
CSS:
input[type=checkbox].css-checkbox {
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:37px;
height:32px;
display:inline-block;
line-height:32px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:32px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -32px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_c1a4f40d98f1c23d1ad84d2af9c314be.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
If you have any opinion how can i fix it so help me.
I try too this script for my code and it doesnt work too.
Test Script: (dont work)
$("input[name=check_lang]").change(function(){
var max= 1;
if( $("input[name=check_lang]:checked").length == max ){
$("input[name=check_lang]").attr('disabled', 'disabled');
$("input[name=check_lang]:checked").removeAttr('disabled');
}else{
$("input[name=check_lang]").removeAttr('disabled');
}
});
or this (dont work)
jQuery(function(){
var max = 1;
var checkboxes = jQuery('input[type="checkbox"]');
checkboxes.click(function(){
var $this = $(this);
var set = checkboxes.filter('[name="'+ this.name +'"]')
var current = set.filter(':checked').length;
return current <= max;
});
});
If you have a group of items that require ONE to be selected only then you should be using a radio type not a checkbox. That will take care of your issue. The default behavior of a radio button is to only allow one selection out of many. Then you don't even need your JS.
you can use this snippet:
it uses name to identify the checkboxes if there are multiple on the page
it gives you the type=radio effect
$("input:checkbox").on('click', function() {
var $checkbox = $(this);
if ($checkbox.is(":checked")) {
var more = "input:checkbox[name='" + $checkbox.attr("name") + "']";
$(more).prop("checked", false);
$checkbox.prop("checked", true);
} else {
$checkbox.prop("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Checkboxes with Radio-Effect</p>
<label>
<input type="checkbox" name="checkbox" />Check 1</label>
<label>
<input type="checkbox" name="checkbox" />Check 2</label>
<label>
<input type="checkbox" name="checkbox" />Check 3</label>
</div>
Im sorry to open a question, which I am sure many will consider very basic but I don't really know javascript and am learning as my application grows
I have the following
When radio button is clicked I would like the div with class="teams" to change border colour to red.
I came up with this code
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" return border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />
</center>';
function border(){
if(document.getElementById("one").checked){
document.getElementById("teams").style.borderColor="red"
}
else if( document.getElementById("two").checked){
document.getElementById("teams").style.borderColor="red"
}
}
echo'<div class="teams">';
echo'<img src="images/teams/'.$src1.'.png" id="t1" />';
echo'<img src="images/teams/'.$src2.'.png" id="t2" />';
echo'</div>';
Clearly I am doing something wrong. Any help will be greatly appreciated
Following is the error thrown.
teams is a class attribute and not ID.
Change getElementById("teams") to getElementsByClassName("teams")
Note that getElementsByClassName("teams") returns an array of matched elements; so use a loop to set the value of each or just use getElementsByClassName("teams")[0].style.borderColor
function border() {
var el = document.getElementsByClassName("teams")[0];
if (document.getElementById("one").checked || document.getElementById("two").checked) {
el.style.borderColor = "red";
el.style.borderStyle = "solid";
}
}
Try onclick="border(this.id)"
<labe><input type="radio" onclick="border(this.id)" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" border(this.id)" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
function border(id){
if(document.getElementById(id).checked){
document.getElementsByClassName('teams')[0].style.borderColor="red"
}
}
Working demo
In your code teams is a class name and not id.
echo'<div class="teams">';
Either you change it to id:
echo'<div id="teams">';
Or use getElementsByClassName("teams"), it will give you NodeList
document.getElementsByClassName("teams")[0].style.borderColor="red";
Apart from this, you could possibly try this solution just using css pseudo:
input[type=radio].check {
display: none;
}
input[type=radio].check + label.check {
border: 1px solid grey;
padding: 5px 7px;
cursor: pointer;
width: 150px;
display: block;
text-align: center;
margin-bottom: 2px;
}
input[type=radio].check:checked + label.check {
background: red;
}
<input type='radio' name='team' value='Team 1' class='check' id='check1' />
<label for='check1' class='check'>Team 1</label>
<input type='radio' name='team' value='Team2' class='check' id='check2' />
<label for='check2' class='check'>Team 2</label>
<input type='radio' name='team' value='Draw' class='check' id='check3' />
<label for='check3' class='check'>Draw</label>
Just a little tip I would try and get away from using the onclick events and move towards external javascript.
I've created an example of something you could try.
$(':radio').change(function ()
{
if ($(this).val() == "team1")
{
$(".row").css("border-color", "blue");
}
else if ($(this).val() == "team2")
{
$(".row").css("border-color", "red");
}
});
div.row {
border: 2px solid black;
height: 200px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
</div>
<label for="team1">1</label>
<input id="team1" type="radio" name="team1" value="team1">
<label for="team2">2</label>
<input id="team2" type="radio" name="team2" value="team2">
I have 3 fields: publishers in a radio-button, cities name in a drop-down list and images of news paper.
How it is possible when I select the radio button the city drop-down changes accordingly and when we select a particular city the image of news paper comes according to the city selected?
the code i am using is the code is working in first time when we select another publisher code doesnot work for images :
<html>
<title>index</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var listA =[{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Banglore', value:'Banglore'}, {name:'Chennai', value:'Chennai'}, {name:'Delhi', value:'Delhi'}, {name:'Hyderabad', value:'hyderabad'}, {name:'Jaipur', value:'Jaipur'}, {name:'Kochi', value:'Kochi'}, {name:'Kolkata', value:'Kolkata'}, {name:'Lucknow', value:'Lucknow'}, {name:'Mumbai', value:'Mumbai'}, {name:'NaviMumbai', value:'NaviMumbai'}, {name:'Pune', value:'Pune'}, {name:'Thane', value:'Thane'}];
var listB = [{name:'Banglore', value:'Banglore'}, {name:'Delhi', value:'Delhi'}, {name:'Kolkata', value:'Kolkata'}, {name:'Mumbai', value:'Mumbai'}];
var listC = [{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Mumbai', value:'Mumbai'}, {name:'Banglore', value:'Banglore'}, {name:'Pune', value:'Pune'}];
var listD = [{name:'Ahmednagar', value:'Ahmednagar'}, {name:'Aurangabad', value:'Aurangabad'}, {name:'Jalgaon', value:'Jalgaon'}, {name:'Kolhapur', value:'Kolhapur'}, {name:'Mumbai', value:'Mumbai'}, {name:'Nagpur', value:'Nagpur'}, {name:'Nashik', value:'Nashik'}, {name:'Pune', value:'Pune'}];
var listE = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
var listF = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
var listG = [{name:'Ahmedabad', value:'Ahmedabad'}, {name:'Nav Gujrat Et Wealth', value:'Nav_Gujrat_Et_Wealth'}];
var listH = [{name:'Delhi', value:'Delhi'}, {name:'Mumbai', value:'Mumbai'}, {name:'Lucknow', value:'Lucknow'}, {name:'Ghaziabad', value:'Ghaziabad'}, {name:'Noida', value:'Noida'}, {name:'faridabad', value:'Faridabad'}, {name:'Gurgaon', value:'Gurgaon'}];
$(document).ready( function() {
$("input[name='chk']").on('change',function() {
if($(this).is(':checked') && $(this).val() == 'toi')
{
$('#describe').empty()
$.each(listA, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'tet')
{
$('#describe').empty()
$.each(listB, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'mirror')
{
$('#describe').empty()
$.each(listC, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'mht')
{
$('#describe').empty()
$.each(listD, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'nbt')
{
$('#describe').empty()
$.each(listE, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'eis')
{
$('#describe').empty()
$.each(listF, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'ngs')
{
$('#describe').empty()
$.each(listG, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else if($(this).is(':checked') && $(this).val() == 'vke')
{
$('#describe').empty()
$.each(listH, function(index, value) {
$('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
});
}
else
{
}
});
});
</script>
<style type="text/css">
body{ margin:0; padding:0;}
.header{ width:100%; border-bottom:4px solid #0099ff;}
.headerin{ width: 710px; margin:0 auto; }
.divOuter {
background: none repeat scroll 0 0 #f9f9f9;
border: 2px solid #fff;
border-radius: 10px;
box-shadow: 0 5px 5px #ddd;
margin: 28px auto;
padding:50px 20px;
width: 710px;
}
.clr{ clear:both;}
.left_feilds{ float:left; width:275px;}
.left_right{ float:left;}
.forms{ float:left; margin:128px 0 0 0;}
#describe{ padding:3px 10px; width:150px; float:left;}
.logo{ float:left;}
.submit{ }
.submit input{ background:#d12f2f;
border: 0 none;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 5px; width:80px;margin-top:30px; margin-left:30px; }
.imgs{ margin:180px 0 0 0px; float:left;}
.footer{ width:100%; border-top:3px solid #0099FF;}
.footerin{ width:780px; margin:0 auto; text-align:center;}
.footerin a{ text-decoration:none; color:#666666; font-size:14px;}
img{
float: right;
height: 150px;
margin: 10px -120px;
width: 120px;}
</style>
<script language='JavaScript' type='text/javascript'>
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank /change_images_by_dropdown/images/Chrysanthemum.jpg'>";
break;
case 2:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank/change_images_by_dropdown/images/Desert.jpg'>";
break;
case 3:
document.getElementById("imagedest").innerHTML = "<img src='../../mayank/change_images_by_dropdown/images/Hydrangeas.jpg'>";
break;
}
}
</script>
</head>
<body>
<div class="header">
<div class="headerin">
<div class="logo"><img src="images/big_logo.png" /></div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="divOuter">
<div class="left_feilds">
<p><input type="radio" id="class" name="chk" value="toi" checked>The Times of India<br/></p>
<p><input type="radio" id="Club" name="chk" value="tet">The Economic Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="mirror">Mirror<br/></p>
<p><input type="radio" id="Club" name="chk" value="mht">Maharashtra Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="nbt">NavBharat Times<br/></p>
<p><input type="radio" id="Club" name="chk" value="eis">Ei Samay<br/></p>
<p><input type="radio" id="Club" name="chk" value="ngs">NavGujarat Samay<br/></p>
<p><input type="radio" id="Club" name="chk" value="vke">VijayKarnataka ePaper<br/></p>
<form action="insert_image.php" method="post" enctype="multipart/form-data">
<p><input type="file" name="file" ></p>
<p><div class="submit"><input type="submit" value="Submit" name="Submit"></div></p>
</div>
<div class="left_right">
<div class="forms">
<select id="describe">
<option name="field" value="1" onclick='check_value(1)'>Ahmedabad</option>
<option name="field" value="2" onclick='check_value(2)'>Banglore</option>
<option name="field" value="3" onclick='check_value(3)'>Chennai</option>
<option name="field" value="4" onclick='check_value(4)'>Delhi</option>
<option name="field" value="5" onclick='check_value(5)'>Hyderabad</option>
<option name="field" value="6" onclick='check_value(6)'>Jaipur</option>
<option name="field" value="7" onclick='check_value(7)'>Kochi</option>
<option name="field" value="8" onclick='check_value(8)'>Kolkata</option>
<option name="field" value="9" onclick='check_value(9)'>Lucknow</option>
<option name="field" value="10" onclick='check_value(10)'>Mumbai</option>
<option name="field" value="11" onclick='check_value(11)'>NaviMumbai</option>
<option name="field" value="12" onclick='check_value(12)'>Pune</option>
<option name="field" value="13" onclick='check_value(13)'>Thane</option>
</select>
<div class="clr"></div>
<div class="imgs">
<img src="images/knowMore.png" alt="" />
</div>
</div>
<div class="clr"></div>
<div id='imagedest'></div>
</form>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footerin">
<p>About Us | Advertise with Us | Terms of Use | Privacy Policy </p>
<p>Copyright © 2014 • All rights reserved. </p>
</div>
</div>
</body>
</html>
first add the onchange event on to checkbox.
test the condition checkbox is checked or not
if checkbox is checked then get the value of checkbox and change cities name accrodingly
same thing for cities name to change images
Someone could help you better if you provide the code whatever you have tried
here is a sample code you can get basic idea from
<input name="check" type="radio" onclick="changeCities(this,1)" value="1">having value 1
<input name="check" type="radio" onclick="changeCities(this, 2)" value="2">having value 2
<input name="check" type="radio" onclick="changeCities(this, 3)" value="3">having value 3
<br>
<br><br>
<select id="cities" onchange="getPhosts(this.value);">
<option value="1">india</option>
<option value="2">australia</option>
<option value="3">america</option>
</select>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script>
function changeCities(thisObj, publisher) {
var publisher = publisher || $(thisObj).val();
// here get all the cities based on publishers
// i am writing here some static data
var cities = [{'id':'1', 'name':'dubai'}, {'id':'2', 'name':'arab'}];
var options = '';
for (var i = 0; i < cities.length; i++) {
options += "<option value='"+cities[i].id+"'>" + cities[i].name + "</option>";
}
$('#cities').html(options);
}
function getPhosts(city){
//same process like changeCities() for images here
}
</script>
How to limit checkbox selection to one using jquery or javascript and other checkbox should be disabled after one checkbox selected?
<input type="checkbox" name="size[]" id="size" value="Small" />Small
<input type="checkbox" name="size[]" id="size" value="Medium" />Medium
<input type="checkbox" name="size[]" id="size" value="Large" />Large
<input type="checkbox" name="size[]" id="size" value="Xl" />XL
Here The Example But I Want Same Thing In Html Or Php
http://gravitywiz.com/demos/limit-how-many-checkboxes-can-be-checked/
Problem Is Solved Now Here The Final Solution
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />
$("input[type='checkbox']").on("click" , function(){
$("input[type='checkbox']").not(this).attr("disabled", "disabled");
});
Working Example
If you disable, user can't change his choice after first selection.
Here is a radio button behavior for checkbox.
$("input[type=checkbox]").on('click', function() {
$("input[type=checkbox]").not(this).attr('checked', false);
});
http://jsfiddle.net/BxF4Y/
But to doing that, the best way is to use radio buttons.
Browsing the source code of that page reveals the jQuery they used to achieve that effect. You should just be able to change the checkboxLimit to 1.
<script type="text/javascript">
jQuery(document).ready(function($) {
$.fn.checkboxLimit = function(n) {
var checkboxes = this;
this.toggleDisable = function() {
// if we have reached or exceeded the limit, disable all other checkboxes
if(this.filter(':checked').length >= n) {
var unchecked = this.not(':checked');
unchecked.prop('disabled', true);
}
// if we are below the limit, make sure all checkboxes are available
else {
this.prop('disabled', false);
}
}
// when form is rendered, toggle disable
checkboxes.bind('gform_post_render', checkboxes.toggleDisable());
// when checkbox is clicked, toggle disable
checkboxes.click(function(event) {
checkboxes.toggleDisable();
// if we are equal to or below the limit, the field should be checked
return checkboxes.filter(':checked').length <= n;
});
}
$("#field_11_1 .gfield_checkbox input:checkbox").checkboxLimit(3);
});
</script>
Yes, this is an old thread, however there is no real conclusion here. I have included a fiddle with my version of how check-boxes should work should you wish to limit the number of boxes checked by the user.
/** Begin HTML **/
<div class="cContainer">
<div class="cDropdown">
<div class="downArrow"></div>
<h4>Night Life</h4>
</div>
<div class="multiCheckboxes stick">
<input id="1" class="stick" type="checkbox" value="1" name="l-28">
<label class="stick" for="1">Dive Bar</label>
<br>
<input id="2" class="stick" type="checkbox" value="2" name="l-28">
<label class="stick" for="2">Pub</label>
<br>
<input id="3" class="stick" type="checkbox" value="3" name="l-28">
<label class="stick" for="3">Dance Club</label>
<br>
<input id="4" class="stick" type="checkbox" value="4" name="l-28">
<label class="stick" for="4">Pool Hall</label>
<br>
<input id="5" class="stick" type="checkbox" value="5" name="l-28">
<label class="stick" for="5">Karaoke</label>
<br>
<input id="6" class="stick" type="checkbox" value="6" name="l-28">
<label class="stick" for="6">Sports Bar</label>
<br>
<input id="7" class="stick" type="checkbox" value="7" name="l-28">
<label class="stick" for="7">Trendy</label>
<br>
</div>
/** END HTML **/
/** BEGIN JS **/
$('.cDropdown').on('click', function (e) {
$('.multiCheckboxes').slideUp(50)
e.stopPropagation();
currentDrop = $(this).next();
currentDrop.stop().slideToggle();
});
$('input:checkbox[name="l-28"]').on('change', function () {
var nightLifeLimit = $('input:checkbox[name="l-28"]:checked').length;
if (nightLifeLimit == 2) {
$('input:checkbox[name="l-28"]').each(function () {
if ($(this).is(':checked')) {
return;
}
else {
$(this).prop('disabled', true);
}
});
}
else {
$('input:checkbox[name="l-28"]').each(function () {
$(this).prop('disabled', false);
});
}
});
/** END JS **/
/** BEGIN CSS **/
.cDropdown {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px inset #D3D3D3;
clear: right;
padding: 4px 3px;
width: 150px;
}
.cDropdown h4 {
font-size: 0.86em;
font-weight: normal;
margin: 0 0 0 1px;
padding: 0;
}
.downArrow {
border-left: 8px solid rgba(0, 0, 0, 0);
border-right: 8px solid rgba(0, 0, 0, 0);
border-top: 8px solid #3C3C3C;
float: right;
height: 0;
margin: 3px 0 0 3px;
width: 0;
}
.multiCheckboxes {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #3C3C3C;
display: none;
left: 9px;
max-height: 200px;
overflow: auto;
padding: 5px;
position: absolute;
top: 35px;
width: 146px;
z-index: 999;
}
.multiCheckboxes label {
float: none !important;
font-size: 0.9em;
width: 7.6em !important;
}
http://jsfiddle.net/defmetalhead/9BYrm/1/
I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>
You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.
Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.