假设,现在我们需要实现一个全选的效果,点击全选,所有的复选框的打上√,在点击一下全选,
√去掉,并且能用js获取打上√的值,并在后台可以引用,如下图所示:
前端代码显示:
<label><input type="checkbox" class="check" id="CheckAll" runat="server" οnclick="CheckALL(this);" />全选</label>
<label><input type="checkbox" class="check" name="ckbPKID" id="ckbPKID" value="1" runat="server">单选题</label> <pre class="csharp" name="code"><label><input type="checkbox" class="check" name="ckbPKID" id="ckbPKID" value="2" runat="server">多选题</label>
<pre class="csharp" name="code"><label><input type="checkbox" class="check" name="ckbPKID" id="ckbPKID" value="3" runat="server">填空题</label>
<label><input type="checkbox" class="check" name="ckbPKID" id="ckbPKID" value="4" runat="server">判断题</label>
js全选代码:
<script language="javascript" type="text/javascript">
function CheckALL(o) {
var select = document.getElementsByName("ckbPKID")
for (i = 0; i < select.length; i++)
select[i].checked = o.checked;
}
</script>
js获取选中的复选框的value值:
<script language="javascript" type="text/javascript">
function SubmitCheck() {
var selectID = "'";
var checkedID = document.getElementsByName("ckbPKID");
for (var i = 0; i < checkedID.length; i++) {
if (checkedID[i].checked) {
selectID += checkedID[i].value + "','";
}
}
if (selectID == "'") {
document.getElementById("SelectedGuid").value = "";
}
else {
document.getElementById("SelectedGuid").value = selectID;
}
}
</script>
注:在页面添加一个隐藏控件: <asp:HiddenField ID="SelectedGuid" runat="server" />,在后台就能够得到所需要的值