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 に答える