`

jquery全选/全不选/反选的实现代码(适合入门)

阅读更多
jquery另一种全选、全不选、反选的方式(与原生js混合使用)。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="../css02/js/jquery-1.6.1.js"></script>
<script>
$(document).ready(function(){
$("#selectAll").click(function(){
//这里也可以直接用this,原生js语句
if($(this)[0].checked){
$('[name=items]:checkbox').attr("checked",true);
}else{
$('[name=items]:checkbox').attr("checked",false);
}
});
$("#XOR").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=!this.checked;
});
});
});
</script>
<title>jquery全选|全不选|反选所有_脚本学堂_www.jbxue.com</title>
</head>
<body>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" id="selectAll" value="全选/不选"/>全选/全部选
<input type="button" id="XOR" value="反选"/>
</body>
</html> 
分享到:
评论

相关推荐

    jquery全选反选全不选案例

    "jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...

    jquery 实现全选,全不选,反选,获取选中的值

    综上所述,使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器,我们可以轻松地响应用户的交互,动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式,可以创建出...

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–&gt;测试通过,jquery-1.5.1.js–&gt;测试不通过。 实现CheckBox全选/全不选/反选代码如下: &lt;&#37;@ page language="java" ...

    JQuery实现全选、全不选、反选功能

    JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时,页面中所有的复选框都应该为选中状态, 1.1、当再次点击'全选'按钮时,所有的复选框应该是非选中状态。 1.2、当点击子复选框时,'全选'按钮应该是非选中...

    javaScript实复选框的全选,全不选,反选

    javaScript入门案例之复选框全选,全不选,反选

    Js/Jquery 实现checkbox全选,反选,全不选

    本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先,我们需要理解HTML中的复选框元素`&lt;input type="checkbox"&gt;`,它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...

    jquery全选/全不选/反选另一种实现方法(配合原生js)

    接下来,我们需要监听用户对“全选/不选”和“反选”按钮的操作。这可以通过jQuery的`$(document).ready()`函数来实现,当文档加载完成时执行其中的代码: ```javascript $(document).ready(function(){ // ... })...

    复选框全选、全不选和反选的效果实现.rar

    本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript(JS)实现复选框的全选、全不选和反选功能,这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...

    DataGridView表头添加checkbox实现全选反选

    此外,可能还需要处理`DataGridView`的`UserAddedRow`和`UserDeletedRow`事件,确保新添加或删除的行能正确响应全选/反选操作。同时,如果数据源是从数据库或其他外部数据源加载的,更新数据时也需要考虑这些选择...

    JS实现全选反选全不选

    JS实现全选反选全不选

    javascript复选框实现批量选择

    实现“全选/全不选”复选框的 JavaScript 代码为: ``` function checkall() { var ischecked = document.getElementById("checkall").checked; if(ischecked) { checkallbox(); } else { discheckallbox(); }...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    在描述中提到的“全选/全不选”功能,是多选下拉框的一种高级特性,它提供了快速选择或取消所有选项的便利。 首先,我们来看看`LovCombo.js`,这可能是一个自定义的组合框组件,扩展了ExtJS的原生ComboBox类,以...

    jquery Checkbox 全选 反选 全不选 多种实现方法

    在网页开发中,jQuery 是一个广泛使用...通过以上介绍,我们可以利用 jQuery 实现复选框的全选、反选和全不选功能,同时结合表单验证插件,确保用户按照规定进行输入。在实际应用中,可以根据具体需求进行调整和优化。

    简单的JAVASCRIPT全选/反选

    在上述代码中,`this.checked`代表主复选框的当前状态,将其赋值给每个子复选框,实现了全选/全不选。 反选功能则需要将所有子复选框的选中状态与主复选框的当前状态相反。这可以通过遍历子复选框并切换它们的`...

    C#_WinForm_dataGridView_全选_反选_单选_导出

    C#的WinForm项目的dataGridView控件的CheckBox的全选、全不选、反选、单选、导出全部、仅导出已选择的项目到Excel的功能。简单明了,一看就懂。 我的腾讯微博:http://t.qq.com/djk8888

    jquery全选反选插件

    首先,jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上,当用户需要对一组选项进行全部选中或全部取消时,这种功能特别实用,例如在数据筛选、表单提交等场景。插件通常通过监听复选框的变化,来控制...

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

Global site tag (gtag.js) - Google Analytics