3

画像、ラベル、入力チェックボックスを持つ div があります。divをクリックすると、チェックボックスのステータスがtrueからfalseに変更され、逆になります

jQuery

$(".markerDiv").click(function () {

    if ($(this).find('input:checkbox[name=markerType]').is(":checked")) {

          $(this).find('input:checkbox[name=markerType]').attr("checked", false);
    }
    else {
          $(this).find('input:checkbox[name=markerType]').attr("checked", true);
    }


 alert($(this).find('input:checkbox[name=markerType]').is(":checked"));
});

html

<div class="markerDiv"  id="maker_school"><label class="marker_label">School</label> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox"  /> </div> <br />
4

7 に答える 7

4

javaScript/jQuery メソッドを記述しなくても実行できます。

ラベル内に div をラップするだけです:- 

div {
  background: red;
  padding: 10px 40px;
}
<label for="myCheck">
  <div>
    <input id="myCheck" type="checkbox" />Remember Me!
  </div>
</label>

于 2016-05-08T19:17:01.363 に答える
3

最も簡単な解決策は、ラベルの内側にチェックボックスを配置することです。そうすれば、JS/jQuery は必要ありません。

それができない/したくない場合は、次のことができます。

$(".markerDiv").click(function (e) {    
    if (!$(e.target).is('input:checkbox')) {
        var $checkbox = $(this).find('input:checkbox');
        $checkbox.prop('checked', !$checkbox.prop('checked'));
    }
});

これは、すでに持っているものとほとんど同じです。それが使用することを除いてprop()。あなたが正しく機能しなかった理由は.attr()、checked プロパティを取得するために使用するときにdefaultChecked、現在の状態ではなく状態を参照するためです。

ドキュメントから：

ただし、checked 属性について覚えておくべき最も重要な概念は、checked プロパティに対応していないということです。この属性は実際には defaultChecked プロパティに対応し、チェックボックスの初期値を設定するためにのみ使用する必要があります。

そこにある唯一の他のものはif、チェックボックス自体をクリックしたかどうかをチェックするステートメントです。デフォルトの動作はクリック ハンドラーに干渉するため、最も簡単な解決策は、チェックボックスがクリックされていない場合にのみプログラムでチェックボックスをオンにし、それ以外の場合はデフォルトの動作のままにすることです。

それが理にかなっていることを願って、

ここにフィドルがあります

于 2013-07-04T08:59:57.310 に答える
1

このブログのガイドとして prop を使用してください。チェックボックスがdivにあり、divがクリックイベントに登録されているため、チェックボックスの使用を停止する場合があります。e.stopPropagation を使用して、チェックボックス自体もクリック可能にします。

$('.markerDiv').click(function () {

  if ($(this).find('input:checkbox[name=markerType]').is(":checked")) {

    $(this).find('input:checkbox[name=markerType]').attr("checked", false);
  }
  else {
      $(this).find('input:checkbox[name=markerType]').prop("checked", true);
  }

   alert($(this).find('input:checkbox[name=markerType]').is(":checked"));
});


 $('input[type=checkbox]').click(function (e) {
     e.stopPropagation();
 });
于 2013-07-04T09:10:54.480 に答える
0

私は TecHunter と khurram の提案に従いました。

1) properties 属性のみを使用して属性とプロパティを混在させないでください。ただし、これのみを使用すると、入力チェックボックスのクリック可能な動作がブロックされるため、

2）別の機能を使用します。input[type=checkbox] をクリック イベントに登録し、チェックボックス クリック可能自体の実行を保証する e.stopPropagation() を使用します。 

$('.markerDiv').click(function () {

    var $checks = $(this).find('input:checkbox[name=markerType]');

     $checks.prop("checked", !$checks.is(":checked"));

       //process my data here

 });

$('input[type=checkbox]').click(function (e) {

    e.stopPropagation();

      //process my data here
});
于 2013-07-04T15:37:08.763 に答える
0

HTML要素「label」にプロパティ「for」があります。

<div class="markerDiv"  id="maker_school">
    <label class="marker_label" for="markerType">School</label> 
    <input class="marker_ckeckbox" id="markerType" name="markerType" value="school" type="checkbox"  /> 
</div>

例を次に示します: http://jsfiddle.net/bH3jJ/

「input[type="checkbox"]」要素に「id」属性を設定し、この ID を「label」要素のプロパティ「for」に渡す必要があります。

編集：

jQuery を使用したい場合は、次の解決策があります。

$(".markerDiv").click(function () { 
    var checkBox = $('input[name=markerType]', this);

    $(checkBox).prop('checked', !checkBox.is(':checked'));
});

HTML マークアップで:

<div class="markerDiv" id="maker_school">
    <label class="marker_label">School</label>
    <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox"  />
</div>

例: http://jsfiddle.net/QgEL8/1/

于 2013-07-04T08:44:46.923 に答える