js操作复选框

时间:2023-03-09 22:46:25
js操作复选框

js操作复选框

JavaScript 代码:

//复选框全选
$(function () {
$("#select_all").click(function () {
$("input[name='select_item']").attr("checked", this.checked);
});
//删除所选项
function delete_select() {
var chk_value = "";
$('input[name="select_item"]:checked').each(function () {
chk_value += $(this).val() + ",";
});
if (chk_value.length == 0) {
alert('你还没有选择任何内容')
} else {
$.messager.confirm('提示', '您想要删除吗?', function (r) {
if (r) {
$.post("/TeacherList/DeleteSelected", { "id": chk_value }, function (data) {
if (data == "ok") {
$('input[name="select_item"]:checked').each(function () {
$(this).parent().parent().remove();//移除被选中的行
});
$.messager.show({
title: '提示',
msg: '该记录已删除,下次页面刷新时将为您重新编号',
timeout: 2500,
showType: 'slide'
});
} else {
$.messager.alert("提示", "删除失败" + data, "info");
}
});
}
});
}
}

HTML 部分代码:

 <input type="button" value="删除所选项" onclick="delete_select()"/>
}
@if (ViewData["list"] != null)
{
<table class="bordered" width="100%">
<tr>
<th><input type="checkbox" id="select_all" /></th>
<th>账号</th>
<th>姓名</th>
<th>所属院系</th>
<th>性别</th>
<th>教师类型</th>
<th>工作单位</th>
<th>操作</th>
</tr>
@foreach (TeacherInfo teacherInfo in (List<TeacherInfo>)ViewData["list"])
{
<tr>
<td><input type="checkbox" name="select_item" value="@teacherInfo.id"/></td>
<td>@teacherInfo.UserId</td>
<td>@teacherInfo.name</td>
<td>@teacherInfo.departmentName</td>
<td>@teacherInfo.Tsex</td>
}