1

私のHTMLは次のようになります（残念ながら、使用しているCMSでレンダリングされているため変更できません）。

<li>
<input id="cb1" type="checkbox">
<label for="cb1">
<div>Some Other Content</div>
<div class="pledge">Click to Pledge</div>
</label>
</li>

jQuery。

$("div.pledge").click(function() {

  var checkboxlabel = $(this).parent("label");

  $("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'));

});

このコードを使用すると、ラベル内のどこかをクリックするとチェックボックスが切り替わります。<div class="pledge">必要なのは、要素をクリックしたときにのみアクションが実行されるようにすることです。.stopPropagation（）;だと思います。ここで私を助けますが、私はそれを正しく動作させることができませんでした。

同じ考えを達成しているように見える別のショットがあります：

$("div.pledge").click(function() {

  $("input[for=' + this.parent("label").attr("id") + ']").attr('checked', !$checkbox.attr('checked'));

});
4

5 に答える 5

4

行間を読むと、JSなしで次のことが目的の結果を達成するように思われます。

<li>
<input id="cb1" type="checkbox">
<div>
<div>Some Other Content</div>
<label for="cb1">Click to Pledge</label>
</div>
</li>

http://jsfiddle.net/nnnnnn/VqmBb/

これにより、チェックボックスの横に「その他のコンテンツ」と「クリックして誓約」が表示されますが、私のデモでわかるように、クリックすると「クリックして誓約」の部分だけがチェックボックスをオン/オフにします。

ラベルと「誓約」divを交換し、ラベルのfor属性を使用してチェックボックスに関連付け、自動的にチェック/チェック解除されるようにしました。（ただし、現在、外部divは実際には何も実行せず、スタイリングに必要でない限り削除できます。）

JSに関して、次の行にはいくつかの問題があります。

$("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'));

まず、セレクターは前の行で宣言され"input[for=checkboxlabel]"た変数を使用しようとしているcheckboxlabelようですが、実際に行ったことは、テキスト「checkboxlabel」を含む文字列を含めることだけです。したがって、文字列「checkboxlabel」と等しい「for」属性を持つ「input」要素がないため、HTML内の要素は選択されません。$checkboxまた、どこにも定義されていない変数があります。

更新： OK、以下は更新されたhtmlで機能するはずです（私にとっては機能しました）。宣言されていない変数を使用しようとしているという事実は別として、既存のJSコードの問題は$checkbox、クリックハンドラーを「誓約」divにバインドしようとしていることです。ラベルの他の部分のクリックを処理するために何かをしました。ラベルの他の部分のクリックを特に停止したい場合は、.click()ハンドラーをラベルにアタッチすることをお勧めします-ラベルの子をクリックすると、ラベルのクリックハンドラーにバブルアップするので、クリックされたのはクラス「誓約」のものでした。falseラベルクリックのデフォルトの動作をキャンセルするために戻らない場合は、「pledge」要素は何もせず、デフォルトを発生させます。

$("div.pledge").parent("label").click(function(e) {
    if (!$(e.target).hasClass("pledge"))
        return false;
});

（この処理がすべてのラベル$("label").click()に添付されないように、単に言うのではなく、「div.pledge」の親を選択していることに注意してください。）

それが気に入らない場合は、mgibsonbrの答えが良い選択肢だと思います。

于 2012-02-12T02:52:17.980 に答える
1

私が正しく理解していれば、「HTMLを変更できない」とは、サーバーによって生成されたHTMLだけを意味します。しかし、JavaScriptを使用して、クライアント側で変更できますか？

jQuery(document).ready(function($) {
    $('label[for="cb1"]').removeAttr("for");
    $("div.pledge").click(function() {
        $(this).parent().prev().attr("checked", function(index,oldValue) {
            return !oldValue;
        });
    });
});

このようにして、ラベルにはforもう含まれなくなり、divクリックは手動で処理されます。

于 2012-02-12T03:45:34.933 に答える
0

HTMLとJavaScriptの両方のコードが無効です。
<label>は、などの要素を内部に含めるinlineことができない要素です。 次に、JSコードの一部が欠落しています（追加したようです）。また、これは意味がありません。block<div>
;

$("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'))

これは機能するはずです。新しいhtmlタグと適切なjQueryコードに注目してください。

html：

<li>
    <label>Something that describes this checkbox</label>
    <input id="check" type="checkbox">
    <p>Some Other Content</p>
    <a href="#" id="pledge">Click to Pledge</a>
</li>

jQ：

$('#pledge').click(function()}{ $('#check').prop('checked', true); });
于 2012-02-12T02:42:22.607 に答える
0

これは正しい方法ではありません。ラベルに「for」属性を指定し、割り当てているチェックボックスのIDに設定する必要があります。

<label for="checkbox_id">Label-text</label>
<input type="checkbox" id="checkbox_id" />

これにより、ラベルをクリックしたときにチェックボックスがオン/オフになります。上記の@elclanrsによるすべてのポイントも当てはまり、htmlとjsは無効です。

于 2012-02-12T02:45:27.857 に答える
0

ラベル要素内のチェックボックスを移動します。jsは必要ありません。また、idやfor属性もandelementには必要ありませinputんlabel。これを試して。

<label>
    <input type="checkbox" />
    <div>Some Other Content</div>
    <div class="pledge">Click to Pledge</div>
</label>

デモ

于 2012-02-12T03:10:55.677 に答える