ボタンのクリックでチェックボックスをオフにします。

Question

複数のチェックボックスがあるボックスがあります。私はチェックボックスを選択しているので、別のdivに<span>値（x）</span>を生成しています。今、私はその特定のチェックボックスの（x）をクリックするとチェックボックスのチェックを外したいと思います。

例：チェックボックスを選択し、選択解除に

<span>値（X）</span>が出入りされます。逆は起こっていません。

.reportboxは、タイル（チェックボックス）のクラスです。 #compareSectionはボタンが保存される領域です。私が使用しています

コード：あなたはそれをクリックしたときに、変数を探しますことを意味する文字列としてselectedCheckboxを使用しているライン

var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, selectedCheckbox)' class='badge badge-notify close-badge'>x</span>"; 

で

<script type="text/javascript"> 
     $('.reportBox').click(function() { 
     var selected = $('input[type=checkbox]:checked').map(function(_, el) { 
      selectedCheckbox = el.id; 
      var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, selectedCheckbox)' class='badge badge-notify close-badge'>x</span>"; 
      return "<span id='elementPack'>" + element + "</span>"; 
     }).get(); 
     $("#compareSection").html(selected); 
     }) 

     // this code is for removing the URLs 
     function removeReport(sender, selectedCheckbox) { 
     document.getElementById(selectedCheckbox).checked = false; 
     var div = sender.parentNode; 
     div.parentNode.removeChild(div); 
     } 
    </script> 

Answer 1

<script> 
$(function() { 
    $('.reportBox').click(function() { 
     var selected = $('input[type=checkbox]:checked').map(function(_, el) { 
     selectedCheckbox = el.id; 
     var element = '<p class="selectedReport">'+ $(el).val() + '</p>' + '<span data-target-box="'+el.id+'" class="badge badge-notify close-badge">x</span>'; 
     return '<span id="elementPack">' + element + '</span>'; 
    }).get(); 
    $("#compareSection").html(selected); 
    }); 
    $(document).on('click', 'span[data-target-box]', function(e) { 
     $('#'+$(this).data('target-box')).prop('checked', false); 
     $(this).remove(); 
    }); 
}); 
</script> 

Answer 2

は、しかし、変数でした最初のスコープの外で定義されることはありません。

var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, \'"+selectedCheckbox+"\')' class='badge badge-notify close-badge'>x</span>"; 

それは、その後document.getElementById()で使用できる文字列としてidを持つremoveReport(this, 'id_of_element')を呼び出すように：あなたは、おそらく次のように変更します。