ajax 动态获取checkbox，实现全选。

来源：互联网发布：caffe matlab 编译编辑：程序博客网时间：2024/06/03 17:49

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>

<link href="../ued/themes/default/css/umeditor.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../ued/third-party/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../ued/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../ued/umeditor.min.js"></script>
<script type="text/javascript" src="../ued/lang/zh-cn/zh-cn.js"></script>
<title></title>
</head>
<body>
<form runat="server" style="margin:0 auto;" id="form" class="form-horizontal group-border hover-stripped" role="form">
<div id="content">
<div class="outlet">
<div class="radio_codetype row" style="text-align:center;" >
XXXX<br />
<asp:DropDownList ID="ddlSaleChannelType" runat="server" class="form-control" style="width:250px;margin-left:25%;"></asp:DropDownList>
</div>
<br />

<div id="divCheckBoxSaleChannel"style="text-align:center;" >

</div>

<%-- <br />
<div id="divIsNewSaleChannel" style="text-align:center;">
<asp:TextBox runat="server" ID="txtSaleChannel" MaxLength="20" class="form-control tip" Style="margin-left:20%;width:250px;text-align:center;float:left;" />
<div style="margin-left:5px;">
<input type="button" id="addSaleChannel" onclick="addSaleChannels();" value="+" style="width:40px;height:35px;" class="btn btn-success"/>
</div>
</div>--%>
<br />
<div style="text-align:center;margin-bottom:6px">
<asp:Button ID="btnSaveOk" runat="server" OnClientClick="saveOK();" Text="选择" class="btn btn-success " Style="width: 100px;" />
</div>
</div>
</div>
<div style="display: none;">
<asp:HiddenField ID="hfNameUrlList" runat="server" />
</div>
<script>

$(document).ready(function () {
$('#ddlSaleChannelType').change(function () {
$.post("../Controller/ApiController.ashx", {
GetResult: "getsalechannelbytype",
type: $('#ddlSaleChannelType').val(),
}, function (results, status) {
if (status == "success") {
var json = JSON.parse(results);
if (json.length > 0) {
$('#divCheckBoxSaleChannel').empty();
var str = "";
/* for (var i = 0; i < json.length; i++) {
str += "<a href=\"#\" class=\"list-group-item\" > ";
str += "<input type=\"checkbox\" name=\"checkboxSaleChannelid\" value=" + json[i].Id + " />" + json[i].Name + "</a>";
}*/
str = "<input type=\"checkbox\" onclick=\"selectAll()\"/>全选"
for (var i = 0; i < json.length; i++) {
str += "<a href=\"#\" class=\"list-group-item\" > ";
str += "<input type=\"checkbox\" class=\"ck\" name=\"checkboxSaleChannelid\" value=" + json[i].Id + " />" + json[i].Name + "</a>";
}

$('#divCheckBoxSaleChannel').append(str);
}
else {
$('#divCheckBoxSaleChannel').empty();
}
}
});
});

});

function selectAll() {
//操作所有复选框的选中状态
//$(".ck").attr("checked", true);
if ($("input[id='selAll']").is(":checked")==true) {
$(".ck").prop("checked", true);
} else {
$(".ck").prop("checked", false);
}
}

//获取选定的值
function saveOK() {
getCheckVale();
if (parent.iframeBack) {
parent.iframeBack(2, $("#<% = hfNameUrlList.ClientID %>").val());
}
}



//获取选中的
function getCheckVale() {
var uNameUrl = new Array();

$("input[name='checkboxSaleChannelid']:checked").each(function () {
var j = uNameUrl.length;
var name = $(this).next().context.nextSibling.textContent;
uNameUrl[j] = "<div dtatsysno='" + $(this).val() + "'><span>" + name + "</span><input type=\"hidden\" name=\"salechannelid\" value='" + $(this).val() + "'/>";
uNameUrl[j] = uNameUrl[j] + " <i class='icon-remove' style=\"cursor:pointer;color:red;\" onclick='delSysNo(this,3)'>删除</i></div>";

});
//拼接
userNameUrl = "";
for (var n = 0; n < uNameUrl.length; n++) {
userNameUrl = userNameUrl + uNameUrl[n];
}

$("#<% = hfNameUrlList.ClientID %>").val(userNameUrl);
}

</script>
</form>
</body>
</html>

0 0