Change image in specified div when checkboxes are selected - javascript

I am wanting to display an image in a div when checkboxes or buttons are selected. I need to to be able to select multiple boxes and display a different image based on the total selection.
The selection matrix would be as follows: A, B, C, D, AB, AC, AD, BC, BD, ABC, ABD. C and D cannot appear together. When nothing is selected I want it to display image F.
I was also hoping to use Bootstrap styling to make them look like buttons not checkboxes.
<div>
<form name="test1">
<div data-toggle="buttons" class="btn-group itemcontent">
<label class="btn btn-default"><input type="checkbox" name="myimages" value="01" id="myimages" onclick="check_value(1)" />Selector1</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="02" id="myimages" onclick="check_value(2)" />Selector2</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="03" id="myimages" onclick="check_value(3)" />Selector3</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="04" id="myimages" onclick="check_value(4)" />Selector4</label>
</form>
</div>
I was thinking of using a script like this:
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_Base_Model.png'>";
break;
case 2:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_DW.png'>";
break;
For my image display div:<div class="col-6" id="imagetest"></div>
But I'm honestly not sure where to go from here. I'm VERY new to JavaScript.
Thank you!
UPDATE
With a friends help we were able to come up with a test, but I can't get the code to work correctly...
<!DOCTYPE html>
<html>
<head>
<title>Test </title>
<script src="https://cdnjs.cloudflare.com/.../jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/.../jque.../1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../jqu.../1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/.../3.3.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../3.3.6/css/bootstrap.css" />
<style type="text/css">
input {
display: none;
}
input:checked ~ label {
background: #00C000;
border: 1px solid #090;
color: #fff;
}
label {
background: #ddd;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
padding: 10px 30px;
border: 1px solid #aaa;
color: #555;
}
</style>
</head>
<body>
<div id="form1">
<form name="test">
<span><input type="checkbox" id="chk1" onchange="check_value()" data-val="A"><label for="chk1">A</label></span>
<span><input type="checkbox" id="chk2" onchange="check_value()" data-val="B"><label for="chk2">B</label></span>
<span><input type="checkbox" id="chk3" onchange="check_value()" data-val="C"><label for="chk3">C</label></span>
<span><input type="checkbox" id="chk4" onchange="check_value()" data-val="D"><label for="chk4">D</label></span>
</form>
</div>
<div id="imagetest" style="height:200px;width: 200px; border: 5px solid red;">
</div>
</body>
<script type="text/javascript">
function check_value()
{
var myVal = '';
$("input[type=checkbox]").each(function()
{
if ($(this).is(':checked'))
{
myVal += $(this).data('val');
}
});
alert(myVal);
var myDiv = $('#imagetest');
if (myVal == 'A')
{
myDiv.css('background-color', 'blue');
}
else if (myVal == 'B')
{
myDiv.css('background-color', 'green');
}
else if (myVal == 'C')
{
myDiv.css('background-color', 'grey');
}
else if (myVal == 'D')
{
myDiv.css('background-color', 'pink');
}
else if (myVal == 'AB')
{
myDiv.css('background-color', 'orange');
}
else if (myVal == 'AC')
{
myDiv.css('background-color', 'yellow');
}
else if (myVal == 'AD')
{
myDiv.css('background-color', 'black');
}
else if (myVal == 'BC')
{
myDiv.css('background-color', 'lightblue');
}
else if (myVal == 'BD')
{
myDiv.css('background-color', 'lightgreen');
}
else if (myVal == 'ABC')
{
myDiv.css('background-color', 'brown');
}
else if (myVal == 'ABD')
{
myDiv.css('background-color', 'Cyan');
}
else
{
myDiv.css('background-color', 'white');
}
}
</script>
<style type="text/css">
input {
display: none;
}
input:checked ~ label {
background: #00C000;
border: 1px solid #090;
color: #fff;
}
label {
background: #ddd;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
padding: 10px 30px;
border: 1px solid #aaa;
color: #555;
}
</style>
</html>
What am I doing wrong here..?

Ok, I got it you want to change image in radio-button selection. If you want to select multiple radio-button you must use another type, checkbox.
Vanilla JavaScript
This is a vanilla, pure javascript, code:
function changeImage(elem) {
var imageUrl = elem.getAttribute('image');
document.getElementById('imgview').setAttribute('src', imageUrl);
}
document.querySelector('[value="one"]').click();
<div id="form1">
<form name='test'>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
</form>
</div>
<div id="imagetest">
<img id="imgview" src="">
</div>
Simple explanation:
You give every radio button an attribute with the link (relative or absolute is your choice) and then in the function call grep the value for that attribute for the clicked element and set it as image element source.
jQuery
If you want to use jQuery to accomplish it this is a sample:
$(document).ready(function() {
$('#form1 input[name=field][value]').on('click', function(e) {
var imageUrl = $(this).attr('image');
$('#imgview').attr('src', imageUrl);
});
$('#form1 input[name=field][value=one]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="form1">
<form name='test'>
<span><input type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
<span><input type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
<span><input type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
<span><input type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
<span><input type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
</form>
</div>
<div id="imagetest">
<img id="imgview" src="">
</div>
Edit:
Multiple selection with multiple image view
$(document).ready(function() {
$('#form1 input[name=field][value]').on('click', function(e) {
var imageUrl = $(this).attr('image');
var fieldValue = $(this).val();
var idImage = 'image_' + fieldValue;
if ($(this).is(':checked')) {
$('#imagetest').append('<img src="' + imageUrl + '" id="' + idImage + '">');
} else {
$('#'+idImage).remove();
}
});
$('#form1 input[name=field][value=one]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form1">
<form name='test'>
<label><input type="checkbox" image="https://placebear.com/300/200" name="field" value="one">BASE</label>
<label><input type="checkbox" image="https://placebear.com/300/300" name="field" value="two">Deep Well </label>
<label><input type="checkbox" image="https://placebear.com/200/200" name="field" value="three">Extension </label>
<label><input type="checkbox" image="https://placebear.com/200/300" name="field" value="four">Treadmill</label>
<label><input type="checkbox" image="https://placebear.com/300/250" name="field" value="five">Stairs </label>
</form>
</div>
<div id="imagetest">
</div>

Related

Min-max selection - checkbox

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>

Javascript border colour not changing on radio button click

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">

Change form inputs based on selected values

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

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/

CSS,HTML formatting in a form

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.

Categories