jquery-实现全选与不全选

jquery代码:

省略引用jquery代码。

<script type="text/javascript">

//全选
    $(function() {
        $("#selectAll").click(function() {
            if (this.checked) {
                $("#chapterlist :checkbox").each(function() {
                    this.checked = true;
                });
                $("#selectAll").attr("value", "反选");
            } else {
                $("#chapterlist :checkbox").each(function() {
                    this.checked = false;
                });
                $("#selectAll").attr("value", "全选");
            }
        });

//设置全选复选框
        $("#chapterlist :checkbox[name!=all]").click(function() {
            allchk();
        });

function allchk() {
            var objs = $("#chapterlist :checkbox[name!=all]");
            var chknum = objs.size();//选项总个数
            var chk = 0;
            objs.each(function(index, o) {
                if ($(o).is(":checked")) {
                    chk++;
                }
            });
            if (chknum == chk) {//全选
                $("#selectAll").attr("checked", true);
            } else {//不全选
                $("#selectAll").attr("checked", false);
            }
        }

});
</script>
主体内容:
<table class="content" border="0" id="chapterlist">
                    <tr style="font-weight: bold;" class="listfirst">
                        <td width="10%">
                            <s:checkbox id="selectAll" fieldValue="" name="all"
                                onclick="selectAll()"></s:checkbox>
                            全选
                        </td>
                    </tr>
                    <s:iterator value="recordList" status="status">
                        <tr class="listcontetn">
                            <td width="10%">
                                <s:checkbox fieldValue="%{chapterId}" name="chapterIds"></s:checkbox>
                            </td>
                        </tr>
                    </s:iterator>
                </table>

时间: 2024-10-13 01:34:42

jquery-实现全选与不全选的相关文章

全选,不全选

function chkall() { var obox = document.getElementById("chkAll"); console.log(obox.name); var odiv = document.getElementById("div"); console.log(odiv); var ach = odiv.getElementsByTagName("input"); console.log(ach); for (var

全选,不全选JS

function check(){ //各获取个产品复选框 var oInput=document.getElementsByName("product"); //遍历,document.getElementById("all")这个是全选按钮 for (var i=0;i<oInput.length;i++) oInput[i].checked=document.getElementById("all").checked; }

jquery实现全选/反选功能

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多选框全选/反选</title> <script src="http://res01.xesimg.com/jquery/jquery.min.js">&l

jquery实现全选和反选功能

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选.反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值. <ul id="list"> <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label>&l

jquery实现全选、全不选、反选、获取选中的所有值总结

HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html><html><head> <meta charset="UTF-8"> <title>checkbox2</title> <style> li { list-style:none; } </style> <script src="js/

jQuery实现全选、反选和不选功能

HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. 1 2 3 4 5 6 7 8 9 10 11 12 13 <ul id="list">   <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>   <li><la

jquery的全选,全不选,反选

jquery的全选,全不选,反选: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryselect.aspx.cs" Inherits="WebApplication9.jqueryselect" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh

一个checkbox 用jquery实现全选、全不选

之前因为一个很小的错误弄了很久,现在才做好. 效果图: 肯定还有更简单的方法. 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkbox.aspx.cs" Inherits="WebApp.Test.Checkbox" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http:

jquery实现全选、不选、反选的两种方法

在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr().   方法一