<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoCheckBox.aspx.cs" Inherits="DemoCheckBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
//全选
$("#btn1").click(function(){
$("input[name='checkbox']").attr("checked","true");
})
//取消全选
$("#btn2").click(function(){
$("input[name='checkbox']").removeAttr("checked");
})
//选中所有基数
$("#btn3").click(function(){
$("input[name='checkbox']:even").attr("checked","true");
})
//选中所有偶数
$("#btn6").click(function(){
$("input[name='checkbox']:odd").attr("checked","true");
})
//反选
$("#btn4").click(function(){
$("input[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked","true");
}
})
})
//或许选择项的值
var aa="";
$("#btn5").click(function(){
$("input[name='checkbox']:checkbox:checked").each(function(){
aa+=$(this).val()
})
document.write(aa);
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn6" value="选中所有偶数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="checkbox1">
checkbox1
<input type="checkbox" name="checkbox" value="checkbox2">
checkbox2
<input type="checkbox" name="checkbox" value="checkbox3">
checkbox3
<input type="checkbox" name="checkbox" value="checkbox4">
checkbox4
<input type="checkbox" name="checkbox" value="checkbox5">
checkbox5
<input type="checkbox" name="checkbox" value="checkbox6">
checkbox6
<input type="checkbox" name="checkbox" value="checkbox7">
checkbox7
<input type="checkbox" name="checkbox" value="checkbox8">
checkbox8
</div>
</form>
</body>
</html>
jquery 循环读取checkbox值
$("input[type=checkbox][checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});
分享到：
相关推荐
通过以上步骤，你可以使用jQuery轻松地实现对checkbox的操作，提高网页的交互性。在实际开发中，还可以根据需求进行更复杂的逻辑处理，如分组选择、多级联动等。希望这个教程能帮助你更好地理解和运用jQuery来控制...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
checkbox 全选\全部取消$(“#ChkAll”).click...获取选中的checkbox的value值:var arrChk=$(“input[name=’chk_list’][checked]”); $(arrChk).each(function(){ window.alert(this.value); }); });
在本示例中，我们探讨了如何使用jQuery获取复选框（checkbox）的值，并通过POST方法将其提交到服务器。这个功能在数据选择、用户确认操作或表单提交等场景中非常常见。 首先，HTML部分创建了一个包含四个值为1、2、...
使用jQuery库可以方便地实现这一功能，尤其是当我们需要对一组具有相同名称的复选框进行操作时。jQuery提供了一些选择器和方法，可以简化这类任务的实现。 首先，了解文档对象模型（DOM）中复选框的数据结构是十分...
在jQuery中，遍历checkbox并获取选中项的value值是一项常见的操作，特别是在表单处理或者数据筛选场景中。在给定的标题和描述中，我们看到一个具体的示例，展示了如何实现这一功能。以下是对这个示例的详细解释： ...
综上所述，jQuery提供了多种方法来操作复选框，包括获取选中值、设置选中状态、删除复选框、遍历复选框以及批量操作复选框的选中状态。掌握这些方法对提升前端开发效率和用户体验都有很大的帮助。在实际开发过程中，...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。在本文中，我们将深入探讨如何使用jQuery来实现复选框（checkbox）的全选、全不选和反选功能。这些功能在表单处理...
在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画以及Ajax交互。在网页开发中，GridView是一种常见的数据展示控件，通常用于显示表格形式的数据。当你需要在GridView中集成复...
以下是一些常见的jQuery表单操作，包括处理复选框（Checkbox）、文本输入（Text）、单选按钮（Radio）以及下拉列表（Select）： 1. **复选框（Checkbox）**： - `$("input[name='checkbox_name'][checked]")` 用于...
jQuery API ： each(callback)：:以每一个匹配的元素作为上下文来执行一个函数。 :checked ：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) js： //js获取复选框值 var obj = document....
这里采用了兼容性更好的通用写法，即使用`each`循环遍历并直接操作`checked`属性，而不是依赖于特定版本的jQuery的`prop`或`attr`方法。 ```javascript $(":checkbox[name=" + name.substring(0, 1) + "]").each...
总结，使用jQuery处理radio、checkbox和select的选中状态及获取选中值是非常常见的操作。理解并熟练运用这些API可以帮助我们更高效地实现页面交互功能。在实际开发中，需要注意选择器的准确性和效率，以及考虑到各种...
在许多场景下，我们可能需要处理复选框（checkbox）的选择状态，例如实现全选和反选的功能。这里我们将详细讲解如何使用 jQuery 和 JavaScript 实现这一目标。 首先，我们来看全选功能的实现。在给定的代码中，有一...
3. 实现全选和反选的基本原理是：获取所有checkbox的DOM对象，并通过循环设置它们的checked属性为true（全选）或false（反选）。 4. 在jQuery中，可以通过选择器来选取所有的checkbox，然后通过.each()方法来遍历...
本篇文章将深入探讨如何使用jQuery实现table表格中checkbox的全选功能，这是一个常见的需求，尤其在需要用户批量操作数据时。 首先，我们需要创建一个基本的HTML表格结构。在表格的表头部分，我们添加一个全选的...