jQuery实现checkbox多选,单选与数据库交互传值,赋值整理

获取被选中的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);
            }
        }
    });

C#将Excel表格内容导入数据库–ASP.NET MVC

JQuery ajax 实现关闭弹窗,刷新列表

ASP.NET MVC的 Action跳转方法归纳部分

C# String字符串方法的使用归纳(直观,粗暴)

你可能感兴趣的:(ASP.NET和ASP.NET,MVC,前端HTML+CSS+JS系列)