0

基本上我想将一堆复选框项目或列表框中的项目绑定到一组相应的自定义图像，以便当我单击或选择多个图像时，它会选择或检查相应的列表框/复选框项目。

下面的示例仅适用于 lsitbox，但不能选择多个项目。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>

谢谢。

4

1 回答 1

3

我更新了您的小提琴以选择多个项目，请在此处查看http://jsfiddle.net/gnel/hvfF9/1/

下面的代码：

$(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;
        });
    });

更新：
我添加了对选择/取消选择列表中单个项目的支持，请参阅http://jsfiddle.net/gnel/hvfF9/2/

在下面添加代码：

$('#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;
});
于 2012-11-14T18:06:28.943 回答