1

これが私がやりたいことです: imageContainerdiv のチェックボックスをクリックすると、チェックボックスがチェックされているはずです。また、選択したボックスの背景色とラベルの色を変更するクラスをいくつか追加します。この部分は機能しています。

divをクリックするimageContainerと、そのdiv内のチェックボックスがチェックされます。しかし、チェックボックスを直接クリックすると、ボックスにチェックマークが表示されません。試してみましたがpreventDefault、うまくreturn falseいきstopPropagationません。

     <div class="imageContainer" id="question-container-7571">
        <img src="/rfs/servicerequest/taskImages/flooring_kitchen.jpg" alt="Flooring">
        <div class="l-top-space">
           <label for="id_7571_11491">Flooring</label>
           <div class="l-right"><input id="id_7571_11491" type="checkbox" name="7571" value="11491"></div>
           <input id="id_7571_11492" type="hidden" name="7571" value="11492">
        </div>
     </div>

私が使用しているjQueryは次のとおりです。

  jQuery('.imageContainer').toggle(
     function(e) {
        var imgCont = jQuery(this);
        imgCont.find('input').prop('checked', true);
        imgCont.addClass('ic-checked');
        imgCont.find('label').addClass('ic-selected');
     },
     function(e) {
        var imgCont = jQuery(this);
        imgCont.find('input').prop('checked', false);
        imgCont.removeClass('ic-checked');
        imgCont.find('label').removeClass('ic-selected');
     }
  );

私が欠けているものに関するヘルプやヒントは素晴らしいでしょう!

4

3 に答える 3

1

申し訳ありませんが、戻るのに時間がかかりました。これが私が最終的に得たコードであり、必要に応じて機能します。周囲の div、ラベル、またはチェックボックスをクリックしてチェック ボックスを選択し、周囲の div の背景を変更します。

jQuery('.imageContainer input:checkbox,.imageContainer label').bind("click",function(e) {
      e.stopPropagation();
   });
   jQuery("div.imageContainer input:checkbox").bind("click",function(){
      var imageContainerDiv = jQuery(this).closest("div.imageContainer");
      var imageContainerInput = jQuery(this);
      var triggerEl="";
      imageContainer(imageContainerDiv,triggerEl);
   });
   jQuery("div.imageContainer").bind("click",function(){
      var imageContainerDiv = jQuery(this);
      var triggerEl=imageContainerDiv;
      imageContainer(imageContainerDiv,triggerEl);
   });
   function imageContainer(imageContainerDiv,triggerElement){
      var imageContainer=jQuery(imageContainerDiv).children("input:checkbox");
      var imageCheckbox = jQuery(imageContainerDiv).find("input");
      if(triggerElement==imageContainerDiv){
         imageCheckbox.prop("checked", !imageCheckbox.prop("checked"));
      }
      jQuery(imageContainerDiv).toggleClass("ic-checked");
      jQuery(imageContainerDiv).find("label").toggleClass("ic-selected");
   }
});
于 2013-05-06T17:09:15.840 に答える
1

これは、クリックがチェックボックスからコンテナーに伝播されるため、チェックボックスがすぐにオフになり、再度オンになるためです。それを防ぐために、次のバインディングを追加できます。

jQuery('input:checkbox', '.imageContainer').click(function(e){
    e.stopPropagation();
});

ただし、コンテナー内の css の変更はトリガーされないため、コードを次のように変更します。

function handleCheckbox(imgCont, checkbox, toggle) {
      var checked = checkbox.prop("checked");
      if (toggle)
      {
        checkbox.prop("checked", !checked);
        checked = !checked;
      }
      if (checked)
      {
        imgCont.addClass('ic-checked');
        imgCont.find('label').addClass('ic-selected');
      }
      else
      {
        imgCont.removeClass('ic-checked');
        imgCont.find('label').removeClass('ic-selected');
      }
}
jQuery('.imageContainer').click(function(e){
   var eventInitiator = jQuery(e.target);
   if (eventInitiator.is(":checkbox") || eventInitiator.is("label"))
      return;
   var imgCont = jQuery(this);
   handleCheckbox(imgCont, imgCont.find('input:checkbox'), true);
});
jQuery('input:checkbox', '.imageContainer').change(function(e){
   var checkbox = jQuery(this);
   handleCheckbox(checkbox.closest(".imageContainer"), checkbox, false);
});
于 2013-04-16T21:55:53.727 に答える
0

この jQuery の書き換えを試してください (最初の行は、ページの読み込み時にいくつかのチェックボックスがオンになっている可能性がある場合にのみ必要です)。

ワーキングフィドル。

/*On page run*/
jQuery('.imageContainer input:checked').addClass("ic-checked");

/*On click*/
jQuery('.imageContainer').click(function(){

  var imgCont = jQuery(this);

  if(imgCont.is('.ic-checked')) {
    imgCont.find('input').prop('checked', false);
    imgCont.removeClass('ic-checked');
    imgCont.find('label').removeClass('ic-selected');

  } else {

    imgCont.find('input').prop('checked', true);
    imgCont.addClass('ic-checked');
    imgCont.find('label').addClass('ic-selected');

  }

});

toogleここでは少し誤用されているように見えるを使用する代わりに、単純にクリック イベント ハンドラーを追加しました。

ここで最も重要な点は、チェックボックスがオンになっているかどうかをチェックしないことです。これを行うと、同じ問題が発生します（チェックボックスをクリックするとチェックされ、その後jQueryが実行され、チェックされていることがわかり、再びチェックが外されるため）。代わりに、追加したクラスが存在するかどうかを確認します。これは、onCheck の場合にのみ追加します。

コード内で既にこの addClass を実行しているため、これを再利用でき、それ以上のクラスは追加されません。

于 2013-04-16T22:14:53.923 に答える