jquery实现复选框案例

最新推荐文章于 2022-07-21 17:39:23 发布
最新推荐文章于 2022-07-21 17:39:23 发布
阅读量987 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： java 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013821825/article/details/51505685
本文详细介绍了如何利用jQuery库来实现对网页中复选框的动态操作，包括选中、取消选中、获取选中状态及批量处理等功能。通过实例代码解析，帮助读者掌握jQuery在复选框交互中的应用技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里写图片描述

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择菜单</title>
<link href="style_cn.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<style type="text/css">
<!--
fieldset div {
    float:left;
    width:24%;
    text-align:left;
    line-height:25px;
}
td div {
    float:left;
    width:24%;
    text-align:left;
    line-height:25px;
}
-->
</style>
<script language="javascript">
        function goSelect(id){
            var $obj = $("#"+id);
            var value = $obj.val();
            var vs = value.split(",");
            if(vs[0] == vs[1]){
                //如果是总管.... 
                $("input[type='checkbox'][value^="+vs[0]+"]").attr("checked",$obj.attr("checked"));
            }else{
                //如果分功能....
                var $pobj = $("input[type='checkbox'][value^="+vs[0]+"][value$="+vs[0]+"]");
                if($obj.attr("checked")){
                    $pobj.attr("checked","true");
                }else{
                    if($("input[type='checkbox'][value^="+vs[0]+"]:not([value$="+vs[0]+"]):checked").length==0){
                        $pobj.attr("checked",false);
                    }
                }
            }
        }

</script>
</head>
<body>
<form name="ActionForm" method="post" action="/webcrm0527/sys/sysRoleAction_set.do">
<input type="hidden" name="method" value="updateMenu">
<input type="hidden" name="roleId" value="402881e42ab919a5012ab91a0b110001">
<br/>
<div class="control">
    <button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';" 
            onClick="SelectAllBox()">
            <img src="./button/quanbuxz.png" border='0' 
            align='absmiddle'>&nbsp;全部选中</button>
    <button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"  
            onClick="UnSelectAllBox()">
            <img src="./button/quanbubxz.png" border='0' 
            align='absmiddle'>&nbsp;全部不选中</button>
    <button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"  
            onClick="document.ActionForm.submit();">
            <img src="./button/baocun.png" border='0' 
            align='absmiddle'>&nbsp;保存</button>
    <button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"  
            onClick="parent.close();">
            <img src="./button/guanbi.png" border='0' 
            align='absmiddle'>&nbsp;关闭</button>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6A82A8">
    <tr>
        <td align="center" height="25"><span style="color:#FFFFFF; font-weight:bold">操作权限组：人力资源部权限组</span></td>
    </tr>
</table>
<div class="border" style="padding:3px">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
         <fieldset style='padding:5px;clear:left;'>
              <legend><input type='checkbox' class='checkbox' name='menuModule' value='company,company' 
                       id='company_company' onClick='goSelect(this.id)' 
                        title="客户管理" checked='checked' >客户管理
              </legend>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='company,base'
                                id='company_base' onClick='goSelect(this.id)' 
                                title='客户拜访' 
                                checked='checked'>客户拜访</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='company,linkMan'
                                id='company_linkMan' onClick='goSelect(this.id)' 
                                title='联系人列表'  >联系人列表</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='company,linkTouch'
                                id='company_linkTouch' onClick='goSelect(this.id)' 
                                title='联系记录列表'  >联系记录列表</div>

                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='company,rule'
                                id='company_rule' onClick='goSelect(this.id)' 
                                title='客户查重设置 '  >客户查重设置 </div>

       </fieldset>

         <fieldset style='padding:5px;clear:left;'>
              <legend><input type='checkbox' class='checkbox' name='menuModule' value='sys,sys' 
                       id='sys_sys' onClick='goSelect(this.id)' 
                        title="系统设置 "  
                         checked='checked' >系统设置 
              </legend>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,group'
                                id='sys_group' onClick='goSelect(this.id)' 
                                title='部门设置' 
                                checked='checked'>部门设置</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,user'
                                id='sys_user' onClick='goSelect(this.id)' 
                                title='人事管理'  >人事管理</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,role'
                                id='sys_role' onClick='goSelect(this.id)' 
                                title='操作权限组' >操作权限组</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,province'
                                id='sys_province' onClick='goSelect(this.id)' 
                                title='省份资料' >省份资料</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,city'
                                id='sys_city' onClick='goSelect(this.id)' 
                                title='城市资料' >城市资料</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,code'
                                id='sys_code' onClick='goSelect(this.id)' 
                                title='编码规则' >编码规则</div>

       </fieldset>

         <fieldset style='padding:5px;clear:left;'>
              <legend><input type='checkbox' class='checkbox' name='menuModule' value='report,report' 
                       id='report_report' onClick='goSelect(this.id)' 
                        title="报表与分析" >报表与分析
              </legend>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='report,khflfx'
                                id='report_khflfx' onClick='goSelect(this.id)' 
                                title='客户分类分析 ' >客户分类分析 </div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='report,khfx'
                                id='report_khfx' onClick='goSelect(this.id)' 
                                title='客户分析 ' >客户分析 </div>
       </fieldset>
</td>
    </tr>
</table>

</div>
</form>
</body>
</html>
/* CSS Document */
/* global */
body {
    margin:0px 5px 0px 5px;
    padding:            0px;
    background-color:   #FFFFFF;
    COLOR:              #838383;
    font-size:          12px;
    FONT-FAMILY:        "宋体", Arial, sans-serif;
}
td {
    FONT-SIZE:          12px; 
    FONT-FAMILY:        宋体,Arial,sans-serif;
    COLOR:              #444444;
}
table {
    FONT-SIZE:          12px; 
    FONT-FAMILY:        宋体,Arial,sans-serif;
    COLOR:              #444444;
}
A {
    FONT-SIZE:          12px;
    FONT-FAMILY:        宋体,Arial,sans-serif;
    TEXT-DECORATION: none;
}
A:link,A:visited {
    text-decoration: none;
    color:#444444;
}
A:hover,A:active {
    TEXT-DECORATION: underline;
    color:#336699;
}
A.top:link,A.top:visited {
    text-decoration: none;
    color:#444444;
}
A.top:hover,A.top:active {
    TEXT-DECORATION: underline;
    color:#009933;
}
A.leftmenu:link,A.leftmenu:visited {
    text-decoration: none;
    color:#444444;
}
A.leftmenu:hover,A.leftmenu:active {
    TEXT-DECORATION: none;
    color:#009933;
}
A.title:link,A.title:visited {
    color:#CC0000;
    font-size:12px;
    text-decoration: none;
}
A.title:hover,A.title:active {
    color:#009933;
    font-size:12px;
    TEXT-DECORATION: underline;
}
H2 {
    MARGIN-TOP: 0px; 
    FONT-WEIGHT: bold; 
    FONT-SIZE: 15px; 
    MARGIN-BOTTOM: 0px; 
    COLOR: #1B7CD0;
}
H3 {
    FONT-WEIGHT: bold; 
    FONT-SIZE: 14px; 
    MARGIN-BOTTOM: 6px;
    COLOR: #6C9AA4;
}
/* form */
form {
    width:              100%;
    padding:            0px;
    margin:             0px;
}
.button {
    cursor:hand;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffF7FDF2,endColorStr=#99ccff,GradientType=0);
    background-color:#fafafa;
    height:22px;
    BORDER: #EFEBC6 1px solid; 
    PADDING-LEFT: 0px; 
    PADDING-RIGHT: 0px; 
    FONT-WEIGHT: normal; 
    FONT-SIZE: 12px; 
    COLOR: #052961;
    line-height:15px;
}
.button_over {
    cursor:hand;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffF7FDF2,endColorStr=#74C9FC,GradientType=0);
    background-color:#fafafa;
    height:22px;
    BORDER: #DBD5BF 1px solid; 
    PADDING-LEFT: 0px; 
    PADDING-RIGHT: 0px; 
    FONT-WEIGHT: normal; 
    FONT-SIZE: 12px; 
    COLOR: #052961;
    line-height:15px;
}
.text1{
border-top-color:#fff;
border-left-color:#fff;
border-right-color:#fff;
border-bottom-style:dotted;
border-bottom-color:#c3c3c3;
}
INPUT {
    BORDER: #C4E3B3 1px solid; 
    color:              #000000;
    BACKGROUND-COLOR: #FFFFFF;
    FONT-SIZE: 12px;
    FONT-FAMILY:        Arial, Verdana, Helvetica, sans-serif;
}
INPUT.disabled {
    BORDER: #C4E3B3 1px solid; 
    color:              #BCBCBC;
    BACKGROUND-COLOR: #F2F2F2;
    FONT-SIZE: 12px;
    FONT-FAMILY:        Arial, Verdana, Helvetica, sans-serif;
}
SELECT {
    BORDER: #C4E3B3 1px solid; 
    color:              #000000;
    BACKGROUND-COLOR: #FFFFFF;
    FONT-SIZE: 12px; 
    FONT-FAMILY:        Arial, Verdana, Helvetica, sans-serif;
}
TEXTAREA {
    BORDER: #C4E3B3 1px solid; 
    color:              #000000;
    BACKGROUND-COLOR: #FFFFFF;
    FONT-SIZE: 12px; 
    FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif; 
}
.checkbox {
    BORDER-RIGHT: 0px; 
    BORDER-TOP: 0px; 
    MARGIN: 0px; 
    VERTICAL-ALIGN: bottom; 
    BORDER-LEFT: 0px; 
    BORDER-BOTTOM: 0px; 
    BACKGROUND-COLOR: transparent
}
.radio {
    BORDER-RIGHT: 0px; 
    BORDER-TOP: 0px; 
    MARGIN: 0px; 
    VERTICAL-ALIGN: bottom; 
    BORDER-LEFT: 0px; 
    BORDER-BOTTOM: 0px; 
    BACKGROUND-COLOR: transparent;
}
/*  fieldset  */
.fieldsetFace {
border-color:#000;
}

/*  table */
table.tabForm {
    border-style:solid;
    border-color:#fff;
    border-width:1px;
    COLOR: #000000;   /*改变字体颜色 如客户搜索*/
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px;
    FONT-SIZE: 12px;
    line-height:17px;

}
table.tabForm td.th_head {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffF7FDF2,endColorStr=#99CCFF,GradientType=0);
    text-align:left;
    border-bottom:1px solid #C4E3B3;
    background-color:#FBFDF8;
}
table.tabForm th{
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffF7FDF2,endColorStr=#99CCFF,GradientType=0);
    text-align:left;
    border-bottom:1px solid #C4E3B3;
    background-color:#FBFDF8;
}
table.tabForm td {
    background-color:#fff;
    color:#000000;
    font-weight:550;
    padding:2px;
}
table.tabForm td.red {
    color:#CC0000;
}
/* readonly page */
table.tabDetailView {
    border-style:solid;
    border-color:#C4E3B3;
    border-width:1px;
    COLOR: #040205; 

    PADDING-RIGHT: 5px; 
    PADDING-LEFT: 5px; 

    FONT-SIZE: 12px; 
    line-height:19px;
}
table.tabDetailView td.th_head {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffF7FDF2,endColorStr=#ffDEF0CB,GradientType=0);
    text-align:left;
    border-bottom:1px solid #B2CCE5;
    background-color:#E1EBF8;




}
table.tabDetailView td.tabDetailViewDL {
    BACKGROUND-COLOR: #FBFDF8; 
    BORDER-RIGHT: #C4E3B3 1px solid;
    BORDER-BOTTOM: #C4E3B3 1px solid;
    COLOR: #444444; 
    TEXT-ALIGN: center;
    VERTICAL-ALIGN: middle; 

    FONT-WEIGHT: normal; 
    FONT-SIZE: 12px; 
    PADDING: 3px; 
}
table.tabDetailView td.tabDetailViewDF {
    BACKGROUND-COLOR: #FBFDF8; 
    BORDER-RIGHT: #C4E3B3 1px solid;
    BORDER-BOTTOM: #C4E3B3 1px solid;
    COLOR: #444444; 
    TEXT-ALIGN: left;
    VERTICAL-ALIGN: middle; 

    FONT-WEIGHT: normal; 
    FONT-SIZE: 12px; 
    PADDING: 3px; 
}
table.tabDetailView td.blackhead {
    BORDER-RIGHT: #ffffff 1px solid; 
    PADDING-RIGHT: 6px; 
    PADDING-LEFT: 6px; 
    FONT-WEIGHT: normal; 
    FONT-SIZE: 12px; 
    PADDING-BOTTOM: 5px; 
    VERTICAL-ALIGN: top; 
    /*BORDER-LEFT: #dfdfdf 1px solid; */
    COLOR: #444444; 
    PADDING-TOP: 5px; 
    BACKGROUND-COLOR: #9ab4d7; 
    TEXT-ALIGN: center;
}

/* title */
.link_title {
    width:100%;
    font-size:12px;
    font-weight:normal;
    color:#265901;
    background-color:#FBFDF8;

    border-style:none solid solid solid ;
    border-color:#C4E3B3;
    border-width:1px;

    padding:3px;
}
.mtitle {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffF7FDF2,endColorStr=#99CCFF,GradientType=0);
    width:100%;
    font-size:12px;
    font-weight:bold;
    color:#6C9AA4;
    padding:3px 0px 0px 0px;
    vertical-align:middle;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #c3c3c3;
    border-right-color: #c3c3c3;
    border-bottom-color: #c3c3c3;
    border-left-color: #c3c3c3;
}
.mtitle-row {
    height:20px;
    width:25px;
    float:left;
}

.menu_selected {
    cursor:hand;
    FONT-SIZE: 12px;
    COLOR: #000000;
    border-color:#C4E3B3;
    border-style:solid solid none solid;
    border-width:1px;
    font-weight:bold;
    height:20px;

    padding:5px;
    background-color:#FFFFFF;
}
.menu_noselect {
    cursor:hand;
    FONT-WEIGHT:normal;
    FONT-SIZE: 12px;
    COLOR: #000000;
    border-color:#C4E3B3;
    border-style:solid;
    border-width:1px;
    height:20px;

    padding:5px;
    background-color:#FFFFFF;
}
.search {
    PADDING-RIGHT: 10px; 
    BACKGROUND-POSITION: 50% top; 
    BACKGROUND-IMAGE: url(images/searchBg.gif); 
    COLOR: #444444; 
    BACKGROUND-REPEAT: repeat-x; 
    BACKGROUND-COLOR: #fafafa; 
    TEXT-ALIGN: right;
}
table.error {
    border:1px solid #EFEBC6;
}
table.error th {
    text-align:left;
    background-color:#FAF1D3;
    color:#000000;
    height:25px;
    padding-left:10px;
}
table.error td {
    padding:5px;
}
/*  layout */
div.control {
    height:             22px;
}
table#header {
    background:url(images/header_bg.gif) repeat-x;
    height:40px;
}
table#header span.companyName {
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
}
table#header div.myAreaBg {
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px; 
    COLOR: #9fb4c8; 
    background:url(images/myAreaBg.gif) bottom repeat-x;
    BACKGROUND-COLOR: #d1dae4;
    height:21px;
    text-align:right;
}
table#welcome {
    BACKGROUND-POSITION: 50% bottom;
    PADDING-LEFT: 10px;
    FONT-WEIGHT: normal;
    FONT-SIZE: 12px;
    BACKGROUND-IMAGE: url(images/welcomeBg.gif);
    PADDING-BOTTOM: 2px;
    VERTICAL-ALIGN: bottom;
    COLOR: #444444;
    BORDER-BOTTOM: #dfdfdf 1px solid;
    BACKGROUND-REPEAT: repeat-x;
    BACKGROUND-COLOR: #ffffff;
}
table#lastView {
    PADDING-LEFT: 10px; 
    BACKGROUND-IMAGE: url(images/lastViewBg.gif); 
    COLOR: #666666; 
    PADDING-TOP: 2px; 
    BACKGROUND-REPEAT: repeat-x; 
    HEIGHT: 22px; 
    BACKGROUND-COLOR: #fafafa
}
.copyRight {
        border: 1px #9E9E9E solid;
        padding: 8px 5px 5px 5px;
        background-image : url(images/searchFormBg.gif);
        background-repeat: repeat-x;
        background-position: top;
        background-color: #FAFAFA;
        font-size: 12px;
        color: #444444;

}
/*  menu */
TABLE.leftColumnModuleHead TH {
    BACKGROUND-POSITION: 50% top; 
    FONT-SIZE: 12px; 
    BACKGROUND-IMAGE: url(images/moduleTab_middle.gif); 
    COLOR: #444444; 
    BORDER-BOTTOM: #9e9e9e 1px solid; 
    BACKGROUND-REPEAT: repeat-x; 
    BACKGROUND-COLOR: #d4d4d4; 
    TEXT-ALIGN: left;
}
table.subMenu {
    BORDER-RIGHT: #9e9e9e 1px solid; 
    FONT-SIZE: 12px; 
    BORDER-LEFT: #9e9e9e 1px solid; 
    COLOR: #444444; 
    BORDER-BOTTOM: #9BA3B0 1px solid; 
    BACKGROUND-COLOR: #ffffff;
}
table.subMenu td.subMenuTDIcon {
    BORDER-RIGHT: #f9f9f9 1px solid; 
    PADDING-RIGHT: 3px; 
    PADDING-LEFT: 3px; 
    FONT-SIZE: 12px; 
    PADDING-BOTTOM: 2px; 
    COLOR: #444444; 
    PADDING-TOP: 1px; 
    BACKGROUND-COLOR: #ffffff;
    background-image: url(images/mail_89.jpg);
}
table.subMenu td.subMenuTD {
    PADDING-RIGHT: 3px; 
    BORDER-TOP: #fafafa 1px solid; 
    PADDING-LEFT: 3px; 
    FONT-SIZE: 12px; 
    PADDING-BOTTOM: 3px; 
    COLOR: #444444; 
    PADDING-TOP: 3px; 
    BORDER-BOTTOM: #9BA3B0 1px solid; 
    BACKGROUND-COLOR: #9BA3B0;
    background-image: url(images/mail_45.jpg);
}
table.subMenu td.subMenuTD1 {
    PADDING-RIGHT: 3px; 
    BORDER-TOP: #fafafa 1px solid; 
    PADDING-LEFT: 3px; 
    FONT-SIZE: 12px; 
    PADDING-BOTTOM: 3px; 
    COLOR: #444444; 
    PADDING-TOP: 3px; 
    BORDER-BOTTOM: #9BA3B0 1px solid; 
    BACKGROUND-COLOR: #FFFFFF;
    background-image: url(images/mail_42.jpg);
}
table.subMenu A.subMenuLink {
    PADDING-LEFT: 0px; 
    CURSOR: pointer; 
    COLOR: #33485c; 
    BORDER-BOTTOM: 0px; 
    TEXT-DECORATION: none
}
/* list */
div.border {
    BORDER-RIGHT: #C4E3B3 1px solid; 
    BORDER-TOP: #C4E3B3 1px solid; 
    BORDER-LEFT: #C4E3B3 1px solid; 
    BORDER-BOTTOM: #C4E3B3 1px solid;
    width:100%;
}
table.listViewPaginationTdS1 {
}
table.listViewPaginationTdS1 td{
    font-size: 12px;
    color: #000000;
    background-color: #FBFDF8;
    padding-right: 5px;
    padding-left: 5px;
    border-top: 1px solid #C4E3B3;
}
table.PowerTable td.listViewThS1 {
    COLOR: #336699;
    BACKGROUND-COLOR: #AFE2E2;
    FONT-SIZE: 12px;
    FONT-WEIGHT: normal;
    HEIGHT: 15px;
    TEXT-ALIGN: left;
    PADDING: 3px 5px 3px 5px;
    word-break: break-all;
    word-wrap:break-word;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #AFE2E2;
    border-bottom-color: #AFE2E2;
}
table.PowerTable tr {
background-color:expression((this.sectionRowIndex%2==0)?"#F7FDF2":"#ffffff");
}
table.PowerTable td {
    font-size: 12px;
    color: #444444;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 4px;
    padding-top: 2px;
    border-bottom: 1px dotted #999999;
    word-break: break-all; 
    word-wrap:break-word;
}
/* report */
.ratetabForm {
    border: 1px #9E9E9E solid;
    padding: 0px 0px 0px 0px;
    background-image : url(images/searchFormBg.gif);
    background-repeat: repeat-x;
    background-position: top;
    font-size: 12px;
    color: #444444;
}
.reportContent{
    color: #008000;
    font-weight:bold;
}
.ratetitle {
    font-family: "宋体", "华文中宋", "黑体";
    color: #444444;
    font-size: 12px;
    font-weight: bold;
    BACKGROUND-COLOR: #EEEEEE;
}
.rate {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    color: #008000;
    font-size: 12px;
    font-weight: bold;
    BACKGROUND-COLOR: #FAFAFA;
}
.ratekong {
    BACKGROUND-COLOR: #CCCCCC;
}
/*  add */
INPUT.text {
    BORDER-RIGHT: #C4E3B3 1px solid; 
    BORDER-TOP: #C4E3B3 1px solid; 
    FONT-SIZE: 12px; 
    BORDER-LEFT: #C4E3B3 1px solid; 
    BORDER-BOTTOM: #C4E3B3 1px solid; 
    BACKGROUND-COLOR: #FBFDF8;
    width:90%;
    FONT-FAMILY:        Arial, Verdana, Helvetica, sans-serif;
}
INPUT.line {
    BORDER-RIGHT: none; 
    BORDER-TOP: none; 
    FONT-SIZE: 12px; 
    BORDER-LEFT: none; 
    BORDER-BOTTOM: #999999 1px solid; 
    BACKGROUND-COLOR: #fafafa;
    width:90%;
    FONT-FAMILY:        Arial, Verdana, Helvetica, sans-serif;
}
table.detailTable {
    FONT-SIZE: 12px;
    border-collapse:collapse;
    border:solid #CCCCCC 1px;
    BACKGROUND-COLOR: #eef3f8;
    line-height:150%;
}
table.detailTable td {
    border:solid #CCCCCC 1px;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    PADDING-TOP: 1px;
}
table.detailTable th {
    PADDING-RIGHT: 5px;
    BACKGROUND-POSITION: 50% bottom;
    BORDER-TOP: #ffffff 1px solid;
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    BACKGROUND-IMAGE: url(images/listViewBg.gif);
    PADDING-BOTTOM: 1px;
    COLOR: #33485c;
    PADDING-TOP: 1px;
    BORDER-BOTTOM: #b0cbe2 1px solid;
    BACKGROUND-REPEAT: repeat-x;
    HEIGHT: 20px;
    BACKGROUND-COLOR: #f8f7f7;
    TEXT-ALIGN: left;
    word-break: break-all;
    word-wrap:break-word;
    border-left:solid #CCCCCC 1px;
    border-right:solid #CCCCCC 1px;
}
table.sale {
    border-collapse:collapse;
    border:solid #CCCCCC 1px;
}
table.sale td {
    border:solid #CCCCCC 1px;
    line-height:19px;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    text-align:center;
}
table.sale input {
    background-color:#eef3f8;
    border-style:none;
    border-bottom:solid #CCCCCC 1px;
}
.red {
    color:#CC0000;
}
/* loding div */
div.load {
    display:block;
    left:50%;
    top:19px;
    width:150px;
    height:25px;
    z-index:2;
    position:absolute;
    background-image: url(images/loadbg.gif);
    background-repeat: repeat;
    line-height:25px;
    text-align:center;
    color:#444444;
    font-size:10px;
    FONT-FAMILY:Arial, Verdana, Helvetica, sans-serif;
    border-bottom:1px solid #698CC3;
    border-left:1px solid #D6E0EF;
    border-top:1px solid #D6E0EF;
    border-right:1px solid #698CC3;
}
ul.list {
    margin:     0;
    padding:    0 0 0 5px;
}
ul.list li {
    padding: 0px;
    margin: 0px;
    list-style-position:inside;
    list-style-type:none;
    line-height:20px;
    background:url(images/dot.gif) no-repeat left center;
}
ul.list li a {
    padding:0px;
}
li.dot {
    padding: 0px;
    margin: 0px;
    background:url(images/dot.gif) no-repeat left center;
    list-style-position:inside;
    list-style-type:none;
    line-height:20px;
}
li.dot a {
    padding:0px;
}
.remarkText {
    font: small-caps 200 10pts 仿宋; 
    color: green;
}
.bgcolors{
    background-color:#FBFDF8;
}
JQuery（十） -- 综合案例（一） 表格复选框
PUYALEI的博客
05-14 204
【代码】JQuery（十） -- 综合案例 表格复选框。
jQuery自定义单选按钮复选框代码
06-24
本资源“jQuery自定义单选按钮复选框代码”专注于改进网页表单元素的样式，特别是单选按钮（radio）和复选框（checkbox），使其更符合现代网页设计的审美需求。 一、jQuery简介 jQuery是由John Resig于2006年创建的...
jquery复选框实例
技术宅--火狼的专栏
09-02 1062
jquery复选框实例 吃 喝 玩 乐 var chAll = $('#chAll'); var chNone = $('#chNone'); var chReverse = $('#chReverse'); var
jQuery对单选框、复选框的获取案例
weixin_42608155的博客
07-28 329
例如：   HTML：&lt;input type="radio" name="sex"  value="boy" checked="checked" /&gt;男                 &lt;input type="radio" name="sex"  value="girl" /&gt;女              
jQuery复选框的实现
W1365966490的专栏
04-01 688
$(function(){    //全选    $("#all").click(function(){       $(":checkbox[name=items]").attr("checked",true);    });    //全不选   $("#no").click(function(){       $(":checkbox[name=items]").attr("c
jquery 实现复选框选择效果
weixin_30929011的博客
09-25 267
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>复选框</title> <script type="text/javascript" src="js/jquery-3.0.0.min.js" >...
jQuery多级复选框checkbox选中代码.zip
最新发布
09-22
在这个案例中，可能有一个名为"script.js"的文件，用于实现多级复选框的逻辑。jQuery的事件监听、DOM操作和数据处理等功能将在这里发挥作用。例如，开发者可能会使用`$(document).ready()`来确保页面加载完毕后再...
使用jQuery实现复选框的动态左右移动功能
使用jQuery实现复选框的左右移动，是指在用户执行特定操作（如点击按钮或拖拽滑块）时，复选框能够根据用户的意图，动态地从列表的左侧移动到右侧，或者从右侧移动到左侧。这个功能不仅可以优化界面布局，还可以提高...
三个基于jQuery的JS复选框全选反选例子
05-12
摘要:脚本资源,jQuery,全选,反选　三个基于jQuery的JS复选框全选反选例子，实用的网页特效，三款例子大同小异。所有checkbox跟着全选的checkbox走，定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，...
jquery 、js实现复选框 (全选、反选)
06-09
jquery 、js实现复选框 (全选、反选)功能··
实例12复选框（java实例系列）
11-29
java100例之实例12复选框（java实例系列）
jQuery实现的复选框勾选
03-26
NULL 博文链接：https://singhoo.iteye.com/blog/1169530
CheckBoxList复选框例子
全栈川川
04-13 1456
搭建设计 复选框设计如下： 效果为： 代码 你也可以直接复制一下代码实现该效果： <%@ Page Language="C#" AutoEventWireup="True" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
四、案例：使用jQuery完成复选框的全选效果
积石成岩，流则不荒
04-14 280
1 知识点 JQ对象修改属性的方法：$.prop("属性名","参数");； this关键字表示当前函数的JQ对象。 2 步骤 文档加载完成事件 allcheck的点击事件中触发函数 函数实现更改checks的checked属性改为allcheck的checked属性 3 实现 <script> $(function(){ $("#allcheck").click(...
【jquery】实现复选框checkbox相关功能:
SunPeng的博客
07-21 696
【jquery】实现复选框checkbox相关功能:
javascript案例（复选框勾选）
qq_37771631的博客
06-21 2583
1.html css部分&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;  &lt;meta charset="UTF-8"&gt;  &lt;title&gt;&lt;/title&gt;  &lt;style&gt;    * {      padding: 0;      margin: 0
html中的简单实例演示（checkbox）的使用
热门推荐
yangxin_blog的专栏
10-15 3万+
演示一个小小的例子：在购物车里面，我们能够勾选自己所选的商品，然后能够显示出相应的价格。 1，首先显示出相应的界面： 相关代码： 商品列表： 笔记本电脑3000   台式机 2900   路由器 90 家常用品500   洗衣机 5600 全选 注意：在checkbox中，要是属于同一组的，在复选框的属性内name="
jquery查找以选择和未选择的checkBox项
如果没有_明天
03-06 1万+
实际开发中有时在表单提交前需要进行一些预处理，对于checkBox，可以用如下方法获取想要的对象  //没被选中的 var checkedList = new Array(); $("input[name='id']:not(:checked)").each(function() { checkedList.push($(this).val()); }); 已选中的 va
web前端————angular1表格中的复选框、全选、反选、分页小例子
xishaoguo的博客
07-01 777
html页面代码： <table class="table ordertable label-table"> <thead> <tr> <th style="width:10%;"> <input type="checkbox" ng-checked="selectAllButton()" ng-click="clickSelectAll($event)">全选
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值