如何設置

Question

我是在按照以下小提琴設置粗體文本上覆選框支票上的複選框選中粗體文字

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

在上面撥弄實施我已經盡力了，但是這是不工作，有正在控制檯沒有錯誤也

這是我的代碼

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>'); 
}); 

，這是我的小提琴

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

您能否讓我知道如何使這項工作。

Answer 1

您可以通過純jquery或jquery +'css'來實現此目的;

檢查這個

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(){ 
 
\t \t $(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{ 
 
\t 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>