如何将数据库中的数据显示到复选框中?

时间:2017-07-06 07:17:02

标签: javascript jquery

我正试图让我的数据库显示在我的复选框中(多选)。 但我不知道怎么做。 我试着制作一个代码,但它没有用。这是我的代码。 我希望有人可以帮助我,并给我一个jquery代码的例子



$(document).ready(function() {
	$.ajax({
		type:"POST",
		url:"../php/absen/absen_karyawan_autocomplete.php",
		success: function(data){
			var list = JSON.parse(data);
			for(var i=0; i < list.length; i++){
			$("#multiselect").append($("<label>").text((list[i]['nama'])).prepend(
        $("<input>").attr('type', 'checkbox').val((list[i]['nama'])).prop('checked', true)
        ));
			}
			return false;
		}
	});
});
&#13;
.multiselect {
    width:20em;
    height:10em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
    <label><input type="checkbox" name="option[]" value="1" />I want put my database data here </label>
    <label><input type="checkbox" name="option[]" value="2" />Red</label>
    <label><input type="checkbox" name="option[]" value="3" />Blue</label>
    <label><input type="checkbox" name="option[]" value="4" />Orange</label>
    <label><input type="checkbox" name="option[]" value="5" />Purple</label>
    <label><input type="checkbox" name="option[]" value="6" />Black</label>
    <label><input type="checkbox" name="option[]" value="7" />White</label>
    <label><input type="checkbox" name="option[]" value="1" />Green</label>
    <label><input type="checkbox" name="option[]" value="2" />Red</label>
    <label><input type="checkbox" name="option[]" value="3" />Blue</label>
    <label><input type="checkbox" name="option[]" value="4" />Orange</label>
    <label><input type="checkbox" name="option[]" value="5" />Purple</label>
    <label><input type="checkbox" name="option[]" value="6" />Black</label>
    <label><input type="checkbox" name="option[]" value="7" />White</label>
    <label><input type="checkbox" name="option[]" value="1" />Green</label>
    <label><input type="checkbox" name="option[]" value="2" />Red</label>
    <label><input type="checkbox" name="option[]" value="3" />Blue</label>
    <label><input type="checkbox" name="option[]" value="4" />Orange</label>
    <label><input type="checkbox" name="option[]" value="5" />Purple</label>
    <label><input type="checkbox" name="option[]" value="6" />Black</label>
    <label><input type="checkbox" name="option[]" value="7" />White</label>
    <label><input type="checkbox" name="option[]" value="1" />Green</label>
    <label><input type="checkbox" name="option[]" value="2" />Red</label>
    <label><input type="checkbox" name="option[]" value="3" />Blue</label>
    <label><input type="checkbox" name="option[]" value="4" />Orange</label>
    <label><input type="checkbox" name="option[]" value="5" />Purple</label>
    <label><input type="checkbox" name="option[]" value="6" />Black</label>
    <label><input type="checkbox" name="option[]" value="7" />White</label>
</div>
&#13;
&#13;
&#13;

我试着为我需要的东西做一个例子 我只使用一个json数据。 我希望有人可以帮助我将代码更改为服务器端。 我已经为第一个问题制作了服务器端代码,但我失败了,数据没有显示在我的页面上

&#13;
&#13;
var json = [
  {
    name: "I want to displaying my database data like this",
    id: "27",
    checked: "true"
    
  }
  
 
];

$.each(json, function () {
        $("#multiselect").append($("<label>").text(this.name).prepend(
            $("<input>").attr('type', 'checkbox').val(this.id)
               .prop('checked', this.checked)
        ));
    });


    $("#multiselect").on('change', '[type=checkbox]', function () {
       console.log($(this).val());
    });
&#13;
.multiselect {
    width:20em;
    height:10em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="multiselect"></div>
&#13;
&#13;
&#13;

0 个答案:

没有答案