UnKnown UnKnown - 24 days ago 10
jQuery Question

How to set Bold text on checkbox check

I was following the below fiddle to set Bold text on checkbox check

http://jsfiddle.net/CjpmP/2420/

I have tried as implemented in the above fiddle , but this is not working and there are no errors under console also

This is my code

var myarray = ["A", "B", "C", "D", "E", "F", "G", "H"];
var counter = 0;
$(document).ready(function()
{
var html = ''
for (var i = 0; i < myarray.length; i++)
{
html += '<td><label class="mt-checkbox mt-checkbox-outline label-for-check"><input type="checkbox" class="chkclass check-with-label">' + myarray[i] + '<span></span></label></td>';
if ((i + 1) % 4 == 0) html += '</tr><tr>';
}
$("#tagstable tbody").append('<tr>' + html + '</tr>');
});


and this is my fiddle

https://jsfiddle.net/dHZS9/734/

Could you please let me know how to make this work .

Answer

You can achieve this either by pure jquery or by jquery + 'css';

check this

var myarray = ["A", "B", "C", "D", "E", "F", "G", "H"];
 var counter = 0;
$(document).ready(function()
{
        var html = ''
        for (var i = 0; i < myarray.length; i++)
        {
                html += '<td><label class="mt-checkbox mt-checkbox-outline label-for-check"><input type="checkbox" class="chkclass check-with-label">' + myarray[i] + '<span></span></label></td>';
                if ((i + 1) % 4 == 0) html += '</tr><tr>';
        }
        $("#tagstable tbody").append('<tr>' + html + '</tr>');
});

//jquery with css
$(document).on("change", ".chkclass.check-with-label", function(){
		$(this).closest("label").toggleClass("bold");
});
/*pure jquery
    $(document).on("change", ".chkclass.check-with-label", function(){
      var label = $(this).closest("label");
      if($(this).is(":checked")){
        $(label).css("font-weight",700);
      }else{
        $(label).css("font-weight",400);
      }
    });*/
.bold{
	font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="table" id="tagstable">
   <tbody>
    
   </tbody>
</table>

<button type="button" class="btn btn-success addTagbtn">Add new tag</button>