2

ここで構築しているフォームでカスタムチェックボックススタイルを使用しようとしています

チェックボックスのラベルをクリックすると、チェックボックスの値が 0 から 1 に、またはその逆に変わります。ただし、カスタム イメージ スタイルを保持するスパン ボックス自体をクリックしても、値は変更されません。以下は、HTML と、それを変更するために使用している jQuery コードのサンプルです。スパンもクリックしたときに値が変化するようにします。

HTML:

<div class="col-xs-12  tick1">
 <span class="checkbox" style="background-position: 0px -48px;"></span>
 <input type="checkbox" name="custom9" id="custom9" class="styled">
  <label for="custom9">Have you received your entire order from Plush?
  <span class="mandatory tick1Mandatory"> * </span> </label>
</div>

JS:

$('#custom9').on('change', function () {
  this.value = this.checked ? 1 : 0;
}).change();
4

1 に答える 1

3

「chromeバージョン29.0.1547.66 m」、「firefoxバージョン22.0」でうまく機能します。ただし、他のブラウザーで動作しない場合は、以下のコードをテストできます。

JsFiddle リンク

$('div.ticks div.col-xs-12 input,div.ticks div.col-xs-12 input label').on('click',function () {
 // this.value = this.checked ? 1 : 0;    
 var checkBox = $(this).find("input:checkbox");
checkBox.value = checkbox.checked ? 1 : 0;    
});
于 2013-09-18T12:02:13.373 に答える