194

ボタン付きのラジオグループがある場合:

画像1

...ボタンの代わりに選択オプションに画像のみを表示するにはどうすればよいですか。

ここに画像の説明を入力

4

9 に答える 9

1

以下は、こちらの例に基づく単純な jQuery UI ソリューションです。

http://jqueryui.com/button/#radio

変更されたコード:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
    <input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
  </div>
</form>

</body>
</html>

jQueryUI が画像の背景を処理するので、どのボタンがチェックされているかがわかります。

注意: Javascript を使用してボタンをチェックまたはチェック解除するように設定する場合は、更新関数を呼び出す必要があります。

        $('#radio3').prop('checked', true).button("refresh");
于 2015-02-24T02:50:14.783 に答える