<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link href="css/ingrid.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){
varstr="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
})
})
function selectall()
{
debugger;
$("document").ready(function(){
$("[name='checkbox']").attr("checked",'true');//全选
});
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="form1" method="post" action="">
<a id="all" href="javascript:selectall();">全选</a>
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数项">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值"> <br>
<input type="checkbox" name="checkbox" value="checkbox1">1<br>
<input type="checkbox" name="checkbox" value="checkbox2">2<br>
<input type="checkbox" name="checkbox" value="checkbox3">3<br>
<input type="checkbox" name="checkbox" value="checkbox4">4<br>
<input type="checkbox" name="checkbox" value="checkbox5">5<br>
<input type="checkbox" name="checkbox" value="checkbox6">6<br>
<input type="checkbox" name="checkbox" value="checkbox7">7<br>
<input type="checkbox" name="checkbox" value="checkbox8">8<br>
</form>
</BODY>
</HTML>
分享到:
相关推荐
反选功能则是将已有选中的复选框取消选中,将没有选中的复选框设置为选中状态;全不选功能则是将所有复选框都取消选中。 首先,要实现这些功能,我们需要在HTML页面中添加一组复选框和几个相关按钮(全选、全不选、...
在提供的代码片段中,可以看到一系列按钮对应不同的功能,包括全选、取消全选、选择所有奇数项、反选以及获取所有选中的值。这些功能通过jQuery的选择器和属性操作实现: - **全选**:使用`$("[name='checkbox']")....
- 全选:按钮`#allBtn`触发全选操作,通过`$("input[type='checkbox']").prop('checked', true)`设置所有复选框为选中状态。 - 反选:按钮`#overBtn`实现反选,使用`$("input[type='checkbox']").prop('checked', ...
2. **jQuery实现复选框全选** 要实现全选功能,可以监听一个全选按钮的点击事件,然后遍历所有具有特定名称的复选框,并设置它们的`checked`属性为`true`。以下是一个例子: ```javascript $("#btn1").click...
2、取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:odd").attr("check
本文将详细介绍如何使用jQuery来处理复选框是否被选中的情况,包括全选、取消全选、选中奇数位置的复选框、反选复选框以及获取所有选中复选框的值。 首先,需要了解jQuery中获取复选框状态的方法。在早期的jQuery...
jQuery作为一个功能强大的JavaScript库,提供了一种简便的方式来操作DOM元素,包括复选框的全选、反选、全不选等操作。接下来,我们将深入探讨如何使用jQuery实现复选框的这些功能。 首先,全选功能是指当用户点击...
本文将详细介绍如何使用jQuery技术获取复选框被选中的值,并对其他相关操作(如全选、取消全选、选中奇数项、反选等)进行阐述。 首先,获取复选框被选中的值可以通过原生JavaScript来实现,也可以使用jQuery提供的...
在全选复选框的onchange事件中,会改变所有子复选框的选中状态,从而实现全选或取消全选所有行的效果。反选的功能可以通过对每个复选框进行取反操作来实现。 删除操作需要给“删除”按钮绑定事件处理函数。在函数...
在这个例子中,我们创建了几个按钮和复选框,按钮分别对应不同的功能:全选、取消全选、选中所有奇数位置的复选框、反选和获取选中的复选框值。这些功能是通过jQuery的事件监听器和选择器实现的。 1. 全选所有复选...
然而,文章还提到了其他几个对复选框的操作,包括全选、取消全选、选中所有奇数、反选以及获得选中的所有值。接下来,我们来逐一了解这些操作: 全选操作: ```javascript $("#btn1").click(function(){ $("[name...
在本场景中,我们关注的是如何使用jQuery来处理HTML中的复选框(checkbox)元素,尤其是获取选中的值、实现全选、取消全选、反选以及选择奇数行的操作。下面将详细介绍这些知识点。 1. **获取选中的值** jQuery ...
反选和选中奇数位置复选框的实现稍微复杂一些,需要对复选框进行遍历操作,分别对它们的checked属性进行判断和修改。而获得选中的所有值功能,则需要将所有选中复选框的值拼接起来,并通过`alert()`函数显示。 在...
9. **反选**:遍历所有复选框,如果当前项已选中,取消选中;反之,如果未选中,则选中。这可以通过 `each()` 遍历并使用 `if` 语句实现。 10. **获取选中项的值**:使用 `var str="";` 初始化一个空字符串,然后...
2. 监听复选框状态:使用JavaScript的`addEventListener`绑定`click`事件,获取所有表单内的复选框并根据`select-all`的状态来同步它们。 ```javascript document.getElementById('select-all').addEventListener('...