Check or select multiple items in checkbox/listbox by clicking a custom html element (code inside)
Question
Basically I want to bind a bunch of checkbox items or items in a listbox to a set of corresponding custom images, so that when I click or select multiple images, it selects or checks the corresponding listbox/checkbox item.
The example below, works only on a lsitbox, but it doesn't select multiple items. http://jsfiddle.net/tnkboy/hvfF9/
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Dropdown Selection</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles.css" type="text/css">
<style type="text/css">
body { background-color:#efefef; font-family:Arial, Helvetica, sans-serif; margin:60px; }
h2 { background: url(1326911803_kteatime.png) no-repeat; line-height:38px; padding:0 0 0 50px; font-size:18px; color:#666; }
ul#customselect { margin:0; padding:0; display:block; height:auto; overflow:hidden; margin:0 0 20px 0 !important; }
ul#customselect li { float:left; display:inline-block; margin:0 10px 0 0; cursor:pointer; }
#customselect li a { width:60px; height:60px; padding: 5px; background:#FFF; float: left; border:6px solid #CCC; border-radius:12px; text-decoration:none; text-align:center; font-weight:bold; color:#666; font-size:38px; letter-spacing:-2px; }
#frm_options { clear:both; display:block; }
#customselect li a span { display:block; font-size:11px; letter-spacing:0; }
.selected { border: 6px solid #4a7329 !important; color:#4a7329 !important; background:#dbeccd !important; }
</style>
</head>
<body>
<form action="#" method="post">
<h2>How do you take it?</h2>
<ul id="customselect">
<li><a href="1" class="link">0 <span>Sugar</span></a></li>
<li><a href="2" class="link">1 <span>Sugar</span></a></li>
<li><a href="3" class="link">2 <span>Sugars</span></a></li>
</ul>
<select name="options" id="frm_options" multiple>
<option value="Nothing Selected">Nothing Selected</option>
<option value="1">No Sugar</option>
<option value="2">1 Sugar</option>
<option value="3">2 Sugars</option>
</select>
<div >
<INPUT NAME="options" TYPE="CHECKBOX" value="1"> Option 1<BR>
<INPUT NAME="options" TYPE="CHECKBOX" value="2"> Option 2<BR>
<INPUT NAME="options" TYPE="CHECKBOX" value="3"> Option 3<BR>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('.link').click(function() {
$('#frm_options').val($(this).attr('href'));
$('.link').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
</script>
</body>
</html>
Thanks.
1 answers
solution1
2 ACCPTED 2012-11-14 18:06:28
I updated your fiddle to select multiple items, see it here http://jsfiddle.net/gnel/hvfF9/1/
Code below:
$(document).ready(function() {
$('.link').click(function() {
elem = $('#frm_options [value='+$(this).attr('href')+']');
if (elem.is(':selected')) {
elem.removeAttr('selected');
$(this).removeClass('selected');
} else {
elem.attr('selected','true');
$(this).addClass('selected');
}
return false;
});
});
UPDATE:
I added support for selecting/deselecting individual items on the list, see http://jsfiddle.net/gnel/hvfF9/2/
Added code below:
$('#frm_options option').on('mousedown', function() {
elem = $('#customselect .link[href='+$(this).val()+']');
if ($(this).is(':selected')) {
$(this).removeAttr('selected');
elem.removeClass('selected');
} else {
$(this).attr('selected','true');
elem.addClass('selected');
}
return false;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.