1

私は次のようなコードを持っています

<input type="checkbox" name="abc" value="A" class="chbx">
<a href="#" class="checkbox-selector">href1</a>
<input type="checkbox" name="abc" value="b" class="chbx">
<a href="#" class="checkbox-selector">href2</a>
<input type="checkbox" name="abc" value="c" class="chbx">
<a href="#" class="checkbox-selector">href3</a>

私が望むのは、href1チェックボックスをクリックすると1番目が選択され、クリックするhref2と2番目のチェックボックスが選択されることです。

これは jQuery でどのように行うことができますか?

4

5 に答える 5

2

これを別の方法で行うことができ、javascript をまったく使用しません。

これを試して：

<label><input type="checkbox" value="hello" name="chkbox1" /> Here is the text</label>

<label><input type="checkbox" value="hello" name="chkbox2" /> Here is the text</label>

<label><input type="checkbox" value="hello" name="chkbox3" /> Here is the text</label>
于 2012-07-15T08:24:03.147 に答える
2

jQueryは必要ありません。普通の古いhtmlを使用できます...

<input type="checkbox" name="abc" id="chk1" value="A" class="chbx">
<label for="chk1" class="checkbox-selector">href1</label>
<input type="checkbox" name="abc" id="chk2" value="b" class="chbx">
<label for="chk2" class="checkbox-selector">href2</label>
<input type="checkbox" name="abc" id="chk3" value="c" class="chbx">
<label for="chk3" class="checkbox-selector">href3</label>

古いブラウザー (Fabricio によって提案された ie6 など) にサポートを追加するには、scessor によって提案された jQuery アプローチを使用します。

$('.checkbox-selector').click(function() {
    $(this).prev().prop('checked', true);
});

ラベルをサポートしていないブラウザーを使用している場合は、両方を実装し、javascript アプローチのみを有効にする必要があることに注意してください。

于 2012-07-15T08:24:28.260 に答える
1

クリック時にボックスをチェックおよびチェック解除する完全に機能する例：

$('.checkbox-selector').click(function() {
    var chb = $(this).prev(); //caches selector
    chb.prop('checked', !chb.prop('checked')); //inverses checked state
});

フィドル

しかし、正直なところ、ie6 やその他の非 html5 ブラウザーなどの古いブラウザーとの互換性が本当に必要でない限り、<label>s メソッドを使用する必要があります。

nameリンクの説明を意味する 場合は$(this).text()、クリックされたリンクのテキストを取得するために使用してください。
フィドル

于 2012-07-15T08:26:20.150 に答える
1

ラベルを使用する場合、チェックボックスに ID を指定し、ラベルに FOR 属性を設定する限り、自動的にチェックボックスがオンになります。 

<input type="checkbox" name="abc" value="A" class="chbx" id="c1">
<label for="c1" class="checkbox-selector">href1</label>
<input type="checkbox" name="abc" value="b" class="chbx" id="c2">
<label for="c2" class="checkbox-selector">href2</label>
<input type="checkbox" name="abc" value="c" class="chbx" id="c3">
<label for="c3" class="checkbox-selector">href3</label>

以前のハイパーリンクに適用したスタイルは、引き続きラベルに適用されます。

于 2012-07-15T08:25:00.990 に答える
0

これを行う必要があります：

$('.checkbox-selector').click(function(){
    $(this).prev().attr('checked', true);
});
于 2012-07-15T08:28:34.947 に答える