配列の値に基づいてjqueryでチェックボックスを設定します

Question

私はブートストラップのテーブルで作業していますが、その1つはチェックボックス用です。テーブルには、mysql dbの値が入力されます。 dbでは、チェックボックスの列の値は1または0です。値が1の場合、チェックボックスをオンにします。このコードはありますが、最初のチェックボックスでのみ機能します。どのようにすべてのチェックボックスに使用できますか？これは私のコードです。

   <tbody> 
<?php while($row = $sql->fetch()) { ?> 
    <tr> 
    <td><?php echo $row['Opleiding_ID']; ?></td> 
    <td><?php echo $row['Opleiding']; ?></td> 
    <?php $checked = $row['Hidden']; ?> 

    <script type="text/JavaScript"> 
$(document).ready(function(){ 


        var arr<?php echo $row["Opleiding_ID"]; ?> = <?php echo json_encode($checked); ?>; 

       if (arr<?php echo $row["Opleiding_ID"]; ?> == "1") { 

    $("#mycheckbox<?php echo $row["Opleiding_ID"]; ?>").prop('checked', true); 
        } else { 
        $("#mycheckbox<?php echo $row["Opleiding_ID"]; ?>").prop('checked', false); 
        } 
        }); 



</script>   
    <td><input type="checkbox" id="mycheckbox<?php echo $row["Opleiding_ID"]; ?>" name="checks" value="" class="check"></td> 
    </tr> 
    <?php } ?> 
</tbody> 

Answer 1

$(document).ready(function() { 
     var arr = <?php echo json_encode($checked); ?>; 
     $.each(arr, function(index) { 
      if (arr[index] == "1") { 
       $("#mycheckbox").prop('checked', true); 
      } 
     }); 
    }); 

未テスト&おそらくバグだらけ。しかし、これはあなたが取るべき正しいアプローチです。ループ内の要素を実行します。

Answer 2

動的にテーブルを生成する場合、チェックボックスの値をこのような値に設定できます。
JS：

$(document).ready(function(){ 
// your arr from php 
    var arr = [{'value' : 0 , 'name' :'Itme1' , 'description':'description1'}, 
      {'value' : 1 , 'name' :'Itme2' , 'description':'description2'}, 
      {'value' : 0 , 'name' :'Itme3' , 'description':'description3'}, 
      {'value' : 1 , 'name' :'Itme4' , 'description':'description4'}]; 

    var tableContent = ''; 
     $.map(arr, function (item) { 
     checked= (item.value) ? "checked" : "" ; 
     tableContent+='<tr><td><input type="checkbox"'+checked+ '></td><td>' + item.name + '</td><td>' + item.description + '</td><td><input type="button" value="Edit" ></td></tr>'; 
     }); 
    $("#myTbody").html(tableContent); 
}); 

例：http://jsfiddle.net/tg5op333/39/

Answer 3

あなたが自動インクリメントIDを持っている場合、あなたはそれを従うつもりならば、あなたがこの

<script type="text/JavaScript"> 
    $(document).ready(function(){ 

        var arr<?php echo $row["id"]; ?> = <?php echo json_encode($checked); ?>; 
         $.each(arr<?php echo $row["id"]; ?>, function(index) { 
        if (arr<?php echo $row["id"]; ?>[index] == "1") { 

    $(".check<?php echo $row["id"]; ?>").prop('checked', true); 
        } 
          }); 
      }); 
</script> 


    <td><input type="checkbox" id="mycheckbox" name="checks" value="" class="check<?php echo $row["id"]; ?>"></td> 
    </tr> 
    <?php } ?> 
</tbody> 

のようなJavaScriptコード内でそれをエコーすることができます$ id = $ row ["id"]のような変数を作るべきです。以下を入力してください