0

チェックボックスを使用するのではなく、ユーザーがオプションを選択できるフォームを作成しようとしています。画像を選択できるようにしてください。

画像を選択すると、選択されたことを示す境界線が周囲に表示される可能性があります。

これを処理するのはどのタイプの入力ですか?

4

4 に答える 4

2

チェックボックスは、選択されている/選択されていない場合のデフォルトの HTML 動作であるため、次のようにします。

  • フォームを作成する
  • 画像ごとに、その横にチェックボックスを追加します
  • 画像とチェックボックスに同様の ID の名前を付けます (checkbox1/image1、checkbox2/image2、...)
  • Javascript でチェックボックスを非表示にする
  • 各画像に Javascript イベントをバインドして、画像に関連付けられたチェックボックスをオン/オフにします (ID を使用するか、DOM 内の位置によって行うことができます)。

これには、Javascript が無効になっているユーザーでも、チェックボックスをクリックして画像を選択できるという利点があります。

于 2012-10-17T01:05:01.387 に答える
0

jQuery プラグインhttp://ajaxdump.com/?0BNm4jJ0を使用できます。

于 2012-10-17T00:29:30.613 に答える
0

ボタンを使用します。ユーザーに表示される背景画像を使用して、要素の値でフォームを処理できます。

さよなら

于 2012-10-17T00:24:03.407 に答える
0

解決策 1

:before（クロムでのみテスト済み）と画像を使用して、逆の方法で行うことができます：

デモ: http://jsfiddle.net/SO_AMK/hG9Fh/

いいえ、頭のてっぺんからすべての CSS を入力したわけではありません:D

CSS、このコードは純粋に Chrome 用に作成されたものであり、ブラウザー間の互換性はまったくありません。

input[type='checkbox'] {
  -webkit-appearance: none;
  -webkit-user-select: none;
  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
      inset 0 1px 2px rgba(255, 255, 255, 0.75);
  color: #444;
  font: inherit;
  margin: 0 1px 0 0;
  text-shadow: 0 1px 0 rgb(240, 240, 240);
}

input[type='checkbox'] {
  bottom: 2px;
  height: 13px;
  position: relative;
  vertical-align: middle;
  width: 13px;
}

input[type='checkbox']:checked::before {
  -webkit-user-select: none;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExODIyQUNDRTE5M0FEN0FEQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0QjQ3OTIzNkI3NEQxMUUxODVFM0E5RkQzRkE4MDc5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0QjQ3OTIzNUI3NEQxMUUxODVFM0E5RkQzRkE4MDc5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjkwRTAxMTQxMjIwNjgxMTgwODNEQUM5MDc1RTIzMkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMTgyMkFDQ0UxOTNBRDdBREMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4TU+XQAAAAcklEQVQY02NgwA/YoJgoEA/Es4DYgJBCJSBeD8SboRinBiYg7kZS2IosyQ/Eakh8LySFq4FYHFlxGRBvBOJYqMRqJMU+yApNkSRAeC0Sux3dfSCTetE0wKyXxOWhMKhTYIr9CAUXyJMzgLgBagBBgDPGAI2LGdNt0T1AAAAAAElFTkSuQmCC');
  background-size: 100% 100%;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
}

:enabled:hover:input[type='checkbox'] {
  background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
      inset 0 1px 2px rgba(255, 255, 255, 0.95);
  color: black;
}

:enabled:active:input[type='checkbox'] {
  background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  box-shadow: none;
  text-shadow: none;
}

input:disabled:[type='checkbox'] {
  opacity: .75;
}

:enabled:focus:input[type='checkbox'] {
  -webkit-transition: border-color 200ms;
  border-color: rgb(77, 144, 254);
  outline: none;
}​

解決策 2

チェックボックスをオンクリックをトリガーする画像に置き換えます。これに関する良い記事は次のとおりです: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

于 2012-10-17T00:42:24.310 に答える