javascriptのチェックボックスがチェックされていますが、UIが更新されていません

Question

それぞれの画像をクリックするとチェックボックスをチェックするスクリプトを作成しました。 画像にはcheckbox-img-1のようなIDがあり、チェックボックスの入力にはチェックボックスと画像の最初のペアにはcheckbox-1のようなIDがあります。 2番目のペアのIDはcheckbox-img-2とcheckbox-2などです。 画像をクリックするたびに、それぞれのチェックボックスをオンにします。いくつかの画像ではUIが更新されていますが、更新されていない画像はほとんどありません。 考えられる問題は何ですか？私はちょっと調べましたが、すべての質問は小道具の代わりにattrを持っている間違いをしていました。 私のスクリプトは純粋なjavascriptになっています。私はjQueryを試しましたが、同じバグがあります。 前に表示されていないコンテンツが選択されていないことがわかりました。 JavaScriptコード：

/* Check option on image click */ 
     $(".option-check-img").click(function() { 
      var checkbox_img_id = $(this).attr("id"); 
      var checkbox_id  = checkbox_img_id.replace("checkbox-img", "checkbox"); 
      if(document.getElementById(checkbox_id).checked) 
      { 
       document.getElementById(checkbox_id).checked = false; 
       var d = document.getElementById(checkbox_img_id); 
       d.className = "img-circle pointer"; 
       /*$("#checkbox_id").prop("checked", false); 
       $("#checkbox_img_id").removeClass("img-border"); 
       console.log(document.getElementById(checkbox_id));*/ 
      } 
      else 
      { 
       document.getElementById(checkbox_id).checked = true; 
       var d = document.getElementById(checkbox_img_id); 
       d.className += " img-border"; 
       /*$("#checkbox_id").prop("checked", true); 
       $("#checkbox_img_id").addClass("img-border"); 
       console.log(document.getElementById(checkbox_id));*/ 
      } 
     }); 

すべての解決策はありますか？ありがとうございました。

Answer 1

てみ詳細jQuery prop()用小道具（）の代わりに、ATTR（）

JQuery Script not checking check-boxes correctly

読むのドキュメントを使用します。

Answer 2

  $(".option-check-img").click(function() { 
      var $this = $(this); 
      var checkbox_img_id = $(this).attr("id"); 
      var checkbox_id = checkbox_img_id.replace("checkbox-img", "checkbox"); 
      if ($("#" + checkbox_id + ":checked").length) { 
       $("#" + checkbox_id).prop('checked', false); 
       $("#" + checkbox_img_id).removeClass("img-border"); 
       $("#" + checkbox_img_id).addClass("img-circle pointer"); 
      } else { 
       $("#" + checkbox_id).prop('checked', true); 
       $("#" + checkbox_img_id).removeClass("img-circle pointer"); 
       $("#" + checkbox_img_id).addClass("img-border"); 
      } 
     }); 

コードを適切なjQueryコードに変換しました。

想定： IDはチェックボックスの要素です。

DOM内に同じIDを持つ要素がないことを確認してください。

代替クラスを削除するコードも更新されました。

ありがとうございました

Answer 3

本当にjsを使用してもよろしいですか？あなたはcssだけでこれを行うことができます。

*, *:before, *:after { 
 
    font-family: sans-serif; 
 
    box-sizing: border-box; 
 
} 
 

 
label { 
 
    display: block; 
 
    margin-bottom: 20px; 
 
    cursor: pointer; 
 
} 
 

 
span:before { 
 
    content: ''; 
 
    
 
    display: inline-block; 
 
    width: 15px; 
 
    height: 15px; 
 
    margin-right: 10px; 
 
    
 
    background: white; /* you can place your image url here */ 
 
    border: 4px solid white; 
 
    border-radius: 3px; 
 
    box-shadow: 0 0 0 1px black; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
input:checked + span:before { 
 
    background: black; 
 
}

<label> 
 
    <input type="checkbox"> 
 
    <span>Checkbox 1</span> 
 
</label> 
 
<label> 
 
    <input type="checkbox"> 
 
    <span>Checkbox 2</span> 
 
</label>

Answer 4

純粋なHTML溶液（Fiddle）があります：

<ul><li> 
    <input type="checkbox" id="checkbox-1" /> 
    <label for="checkbox-1"><img /></label> 
</li> 
<li> 
    <input type="checkbox" id="checkbox-2" /> 
    <label for="checkbox-2"><img /></label> 
</li></ul> 

あなたがチェックボックスがチェックされたときにあなたのイメージにスタイリングを追加する必要がある場合は、CSS3を使用することができます（Fiddle ）：

input:checked + label img{ 
    border: 1px solid black; 
} 

input:not(:checked) + label img{ 
    border: 1px solid green; 
} 

// If you want to hide the checkbox 
input[type=checkbox] { 
    display: none; 
} 

あなたはhtmlのようなチェックボックスを作り、イメージはお互いに隣り合っているべきです。

このアプローチははるかにエレガントで、不要なJavaScriptを使用しません。

Answer 5

あなたのチェックボックスIDは一意ではありません。

同じIDを持つ異なるチェックボックスは、管理したいチェックボックスではなくチェック/チェック解除されています。 getElementById/$（ '＃id'）は最初に見つかった要素を1つだけ返します。あなたはパーティーオプションを共有リンクでのインスタンスの

は、チェックボックス - 24のIDを持っていますが、同じIDを持つ3つのチェックボックスの合計があります。

同様チェックボックス-27のIDを持つ音楽ためにそのIDを持つチェックボックスの3つのインスタンスが再び存在します。

スクリプトは正しいのですが、IDは一意ではありません。 IDを一意にするか、他の識別子または識別子の組み合わせを使用して、操作するチェックボックスを一意に識別します。

Answer 6

問題は無限ループで発生していました。無限ループなしで動作します。しかし、私は無限のスライダが欲しいので、私は別のものを試してみます。