版权声明:转载请备注加链接原文,重写请修改加备注链接,谢谢 https://blog.csdn.net/weixin_43972758/article/details/85987143
获取被选中的CheckBox值传入数据库,反之,从数据库获取值让对应的CheckBox被选中
<div class="form-group">
<label class="col-sm-3 control-label">多选框</label>
<div class="col-sm-9" id="div_checkbox">
<input name="chkItem" type="checkbox" value="0" id="select_all" onclick="checkboxOnclick(this)" />全选
<input name="chkItem" type="checkbox" value="1" />内容1
<input name="chkItem" type="checkbox" value="2" />内容2
<input name="chkItem" type="checkbox" value="3" />内容3
<input name="chkItem" type="checkbox" value="4" />内容4
<input name="chkItem" type="checkbox" value="5" />内容5
</div>
</div>
checkbox多选
//不太实用,还存在问题
function checkboxOnclick(checkbox) {
//方法一
if (checkbox.checked)
$("[name = chkItem]:checkbox").attr("checked", true);
else
$("[name = chkItem]:checkbox").attr("checked", false);
//方法二
//$("#select_all").click(function () {
// if ($(this).is(":checked")) {
// $("[name=chkItem]:checkbox").attr("checked", true);
// } else {
// $("[name=chkItem]:checkbox").attr("checked", false);
// }
//});
}
将被选中值传入数据库(脚本)
//点击保存按钮后的内容
var checkItems = $("#div_checkbox input");//获取div_checkbox下的input
var len = checkItems.length;//获取input的数量即全部的checkbox
var items_value = [];//创建一数组接收checkbox的value值
for (var i = 0; i < len; i++) {
if ($("input[class='checkShareType" + i + "']").is(':checked'))
items_value.push($(checkItems[i]).val());
else
continue;
}
var result_value = items_value;
//结果:result_value =“1,2,3,4,5”;
//可用alert(result_value )显示内容验证查看
从数据库获取Value值和checkbox显示内容
(在编辑的时候可自动勾选数据库已有选项)
//先取消全部选择,再重新加载
$("[name = chkItem]:checkbox").attr("checked", false);
$.ajax({
url: ""//要处理的逻辑层地址,
type: "Post",
data: {}//要传递的参数,
//返回的内容为一数据对象
success: function (msg) {
var Data = eval('(' + msg + ')');
if (Data.status == 'error') {
swal("请求错误", Data.message, "error");
}
for (var i = 0; i < Data.length; i++) {
var info = Data[i];
//让匹配的value值被选中
$("input[name='chkItem'][value='" + info.Value + "']").prop("checked", true);
}
}
});