Home/ Questions/Q 8843249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T11:10:25+00:00

Basically I want to bind a bunch of checkbox items or items in a

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
});
    • 0