checkboxes in select drop down menu 1

kzn · Nov 6, 2012

Hi

I have been trying to get the following code to work. It should change the background color of the item selected when checked.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.multiselect {
width:20em;
height:5em;
border:solid 1px #c0c0c0;
overflow:auto;
}

.multiselect label {
display:block;
}

.multiselect-on {
color:#ffffff;
background-color:#000099;
}

</style>
<script type="text/javascript">
jQuery.fn.multiselect = function() {
$(this).each(function() {
var checkboxes = $(this).find("input:checkbox");
checkboxes.each(function() {
var checkbox = $(this);
// Highlight pre-selected checkboxes
if (checkbox.attr("checked"))
checkbox.parent().addClass("multiselect-on");

// Highlight checkboxes that the user selects
checkbox.click(function() {
if (checkbox.attr("checked"))
checkbox.parent().addClass("multiselect-on");
else
checkbox.parent().removeClass("multiselect-on");
});
});
});
};
</script>

</head>

<body>
<div class="multiselect">
<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>

</body>
</html>

An example can be found here but I cant get it work. Any help appreciated.

http://www.1stwebdesigns.com/blog/development/multiple-select-with-checkboxes-and-jquery

vacunita · Nov 6, 2012

I can't see where you are including the jquery library in your code? As it is an external JS library it needs to be included. The easiest way is to use Google's repository links.

Add this inside your head tags

Code:

[COLOR=#990000]<[/color]script src[COLOR=#990000]=[/color][COLOR=#FF0000]"//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"[/color][COLOR=#990000]></[/color]script[COLOR=#990000]>[/color]

You can of course download the jQuery library and include directly form your web page's root folder.

Second, you need to be sure the elements you want to target have been loaded into the page, so its always a good idea to use the .ready() function of the document element.

Code:

$[COLOR=#990000]([/color]document[COLOR=#990000]).[/color][b][COLOR=#000000]ready[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]function[/color][/b][COLOR=#990000]()[/color][COLOR=#FF0000]{[/color]
$[COLOR=#990000]([/color][COLOR=#FF0000]".multiselect"[/color][COLOR=#990000]).[/color][b][COLOR=#000000]multiselect[/color][/b][COLOR=#990000]();[/color]
[COLOR=#FF0000]}[/color][COLOR=#990000]);[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

checkboxes in select drop down menu 1

kzn

MIS

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor