1

現在、jQueryを使用してチェックボックスとテキストを作成し、チェックボックスにチェックを入れた後にテキストを変更していますが、ボックスまたはテキストをクリックして結果がテキストに変更され、チェックボックス？

誰でも私をさらに助けることができますか？

ここに画像の説明を入力

4

6 に答える 6

4

チェックボックスとテキストの周りにラベルテキストを配置するだけで、次のようになります。

    <label><input type="checkbox" />Add to cart</label>

これにより、チェックボックスのテキスト部分が作成されます

于 2013-08-26T13:47:30.727 に答える
1

デモを見る

htmlで

<input type="checkbox" id="test"> <label for="test">text</label>

JSで

$(document).ready(function () {
  $("#test").click(function () {
    if ($(this).is(":checked")) {
      $(this).next("label").text("Added");
    } else {
      $(this).next("label").text("Add to Cart"); // your default color set
    }
  });
});

参照 チェック済み

jQuery。次（）

于 2013-08-26T13:47:30.843 に答える
0

label を使用して for 属性を設定すると、テキストをクリックすると、ボックスがオン/オフになります...

<label for="check1">Label for checkbox</label> 
<input type="checkbox" id="check1" value="value1">Option</input>
于 2013-08-26T13:49:17.857 に答える
0

HTML

HTMLパーツの場合、要素のラベルを指定する方法は 2 つあります。

  1. ラベルのfor属性を要素の ID に設定する

    <input type='checkbox' id='chkCart' />
<label for='chkCart'>Add to Cart</label>

  2. 要素をラベル内に配置する

    <label >
    <input type='checkbox' />
    Add to Cart
</label>

最初のものを使います

JavaScript

次に、jQueryを使用して残りを処理できます。

  • まず、javascript を.ready関数でラップして DOM がロードされていることを確認します (これらの要素を変更するため)。
  • 次に、関数を使用して、チェックボックスのクリック イベントにイベント ハンドラーをアタッチし.clickます。
  • forこの特定のラベルの属性を設定したので、呼び出し要素のと同じ値を持つラベルを探すことでattributeequals セレクタ ( ) を使用できます。[name="value"]forid
  • :checkedセレクタを使用して、イベントを発生させたオブジェクトがチェックされているかどうかを確認できます。
  • JavaScriptのternary演算子を使用して、条件付きで各値を設定できます
  • .text次に、関数を使用してラベルの名前を変更します

すべて次のようになります。

$(function () {
    $("#chkCart").click(function () {
        var lbl = $(`label[for='${this.id}']`);
        var msg = this.checked ? "Added" : "Add to Cart"
        lbl.text(msg);
    });
});

スタック スニペットとjsFiddleのデモ

$(function () {
    $("#chkCart").click(function () {
        var lbl = $(`label[for='${this.id}']`);
        var msg = this.checked ? "Added" : "Add to Cart"
        lbl.text(msg);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input type='checkbox' id='chkCart'/>
<label for='chkCart'>Add to Cart</label>

于 2013-08-26T14:03:44.537 に答える
0

デモ

これを試して

$("#chk").click(function () {

    if ($(this).is(":checked")) {
        $(this).next().fadeOut("slow", function () {
            $("#chk").next().text("Added");
        }).fadeIn("slow");

    } else {

        $(this).next().fadeOut("slow", function () {
            $("#chk").next().text("Add to cart");
        }).fadeIn("slow");
    }

});

html

<input type="checkbox" id="chk">
<label for="chk" style="text-decoration:underline">Add to cart</label>

これが役に立てば幸いです、ありがとう

于 2013-08-26T15:09:28.733 に答える
-1

onChange イベントをチェックボックスに関連付けることができます。チェックされている場合はテキストを表示し、そうでない場合はリンクを表示します。デモはこちら

HTML コード:

<input type='checkbox' id='check'/>
<label><a href='#'>add to cart</a></label>

JavaScript/jQuery コード:

$('#check').change(function(){

  if ($(this).is(":checked")) $(this).next().text('added');
  else $(this).next().html("<a href='#'>add to cart</a>");

});
于 2013-08-26T19:38:04.260 に答える