<! 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('...