Jquery编辑框弹出复选框

最新推荐文章于 2024-08-06 10:37:21 发布

xiaoliangaccp

最新推荐文章于 2024-08-06 10:37:21 发布

阅读量1k

点赞数 1

文章标签： jquery input class border function webform

本文链接：https://blog.csdn.net/xiaoliangaccp/article/details/6773411

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="jQuery.WebForm3" %>
<!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=gb2312" />
<title>无标题文档</title>
<style>
body {margin:0; padding:10px;font-family:"宋体",Arial,serif; font-size:12px}
div,form,img,ul,ol,li,dl,dt,dd,textarea {margin: 0; padding: 0; border: 0;}
ul,li{list-style-type:none}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
h1{font-size:14px; text-align:left}
table,td,tr,th{font-size:12px;}
input,select{font-size:12px; padding:0; margin:0; vertical-align:middle}
.clear{clear:both; margin:0; padding:0; font-size:1px; height:1px; visibility:hidden}
.blank{ clear:both; margin:0; padding:0; font-size:1px; height:1px;}
a{background:transparent;text-decoration: none;}
a:hover{background:transparent;text-decoration:underline; }
/*下拉框*/
.seleLine{clear:both; position:relative;border:1px solid #ccc;width:800px;height:20px}
.seleLine .ipt01{float:left;width:110px; height:14px; border:0; padding:4px 0 0 5px; cursor:default}
.seleLine a{ float:right;display:block;width:14px; height:20px;padding: 0; border: 0; font-size:1px;background:url(images/s_bt.gif) no-repeat;}
.seleLine a:hover{background:url(images/s_bt2.gif) no-repeat;text-decoration:none;}
.seleDiv{position:absolute;border:1px solid #ccc;width:130px; padding:3px; top:20px; left:-1px; background:#fff}
.seleDiv li{text-align:left;height:20px; padding:0 0 0 1px; border:1px solid #fff}
.seleDiv li.over{border:1px solid #ddd; background:#efefef}
.seleDiv li .soBox{_vertical-align:text-bottom;margin:0 0 3px;_margin:0 0 -1px; height:20px; width:20px }
</style>
<script>
    function $(id) { return document.getElementById(id); }
    function $F(name) { return document.getElementsByTagName(name); }
    function turnit(seleDiv) {
        var seleId = document.getElementById(seleDiv);
        if (seleId.style.display == "none") {
            seleId.style.display = "";
        }
        else {
            seleId.style.display = "none";
        }
    }
    function sele() {
        /* var ipt=document.getElementById(txt);
        var box=document.getElementById(cBox);
        ipt.value=box.value;
        $('postString').value= box.value;*/
        var checkboxs = document.getElementsByName("aa");
        var idArray = new Array();
        for (i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked) {
                idArray.push(checkboxs[i].value);
            }
            else
                checkboxs[i].checked = false;
        }
        $('txtYxbb').value = idArray.join("-");
        //alert($('txtYxbb').value);
        $('postString').value = $('txtYxbb').value;
    }
    function inputValues() {
        var checkboxs = document.getElementsByName("aa");
        var idArray = new Array();
        for (i = 0; i < checkboxs.length; i++) {
            if ($('qy1').checked) {
                checkboxs[i].checked = $('qy1').checked;
                idArray.push(checkboxs[i].value);
            }
            else
                checkboxs[i].checked = false;
        }
        $('txtYxbb').value = idArray.join("-");
        //alert($('txtYxbb').value);
        $('postString').value = $('txtYxbb').value;
    }
</script>
</head>
<body>
<input type="text" id="postString" style="width:800px"><br/>
下面的框显示不全用上面这个显示,我也不想改这个css了
<div class="seleLine">
<input name="" type="text" id="txtYxbb" class="ipt01" value="选择所有" readonly οnclick="turnit('yxbb')"/>
<a href="#" οnfοcus="this.blur()" οnmοuseοver="turnit('yxbb')"> </a>
<div class="seleDiv" style="display:none" id="yxbb">
     <ul>
       <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" ><input name="a" type="checkbox" value="" id="qy1" class="soBox" οnclick="inputValues()"/><label for="qy1">所有区域</label></li>
       <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="台江区" id="qy2" class="soBox"/ ><label for="qy2">台江区</label></li>
       <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="鼓楼区" id="qy3" class="soBox"/><label for="qy3">鼓楼区</label></li>
    <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="湖北" id="qy4" class="soBox"/><label for="qy4">湖北</label></li>
    <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="kevin" id="qy5" class="soBox"/><label for="qy5">kevin</label></li>
    <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value=" www.bluekevin.com" id="qy6" class="soBox"/><label for="qy6">www.bluekevin.com</label></li>
     </ul>
</div>
</div>
</body>
</html>