文本框下綁定DIV下拉複選框

時間 2019-11-19
標籤文本綁定 div 下拉複選框欄目 CSS 简体版
原文原文鏈接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="jquery-1.10.1.min.js"></script>
  <script>
     //看到:has(selector)
     $(function(){
          //$("input[id*='man'][name$='man']").each(function(){
          //  alert(this.outerHTML);
          //});
          //$("button:only-of-type").text("Alone").css("border", "2px blue solid");
          var $divstyle=$("#companydiv").attr("style");
          $("#company").bind("focus", function(){
               var $inptop=$(this).offset().top;
               var $inpleft=$(this).offset().left;
               var $inpHei=$(this).css("height").replace("px","");
               var $divcompany=$("#companydiv");
               $divcompany.offset({left:$inpleft-2,top:($inptop*1+$inpHei*1)});
               document.getElementById("companydiv").style.display="block";
          });
          $("#cfm").click(function(){
               $("#companydiv").attr("style",$divstyle);
               document.getElementById("companydiv").style.display="none";
               var checkNum=0;
               $("#companydiv").find("input[type='checkbox']").each(function(){
                    if($(this).is(":checked")){
                         var htm=$(this).next().html();
                         if(htm=="全 選"){
                              $("#company").val("所有企業");
                         }else{
                              $("#company").val(htm);
                         }
                         return false;
                    }else{
                         checkNum++;
                    }
               });
               var allCheck=$("#companydiv > input").size();
               if(checkNum==allCheck){
                    $("#company").val("");
               }
          });
          $("#ccl").click(function(){
               $("#companydiv").attr("style",$divstyle);
               document.getElementById("companydiv").style.display="none";
          });
          $("input[id='all']").click(function(){
               if($(this).is(":checked")){
                    $(this).siblings().attr("checked",true);
                    $("#company").val("所有企業");
               }else{
                    $(this).siblings().attr("checked",false);
                    $("#company").val("");
               }
          });
          $("#companydiv > input[type='checkbox']").attr("checked",true);
     });
  </script>
</HEAD>

<BODY>
<input type="text" value="所有企業" id="company" style="text-align:center;width:100px;height:22px;font-size:14px;border:1px solid #74a5c5;" readonly/>
<div id="companydiv" style="height:150px;width:100px;border:1px solid #74a5c5;font-size:14px;overflow-y: auto;display:none;position:absolute;z-index:9999;">
          <a href="#" id="cfm"><span style="padding-left:5px;">肯定</span></a><a href="#" id="ccl"><span style="padding-left:20px;">取消</span></a>
          <input type="checkbox" id="all" value="all"/><span>全 選</span>
          <input type="checkbox" id="1" value="1"/><span>企業1</span>
          <input type="checkbox" id="2" value="2"/><span>企業2</span>
          <input type="checkbox" id="3" value="3"/><span>企業3</span>
          <input type="checkbox" id="4" value="4"/><span>企業4</span>
          <input type="checkbox" id="5" value="5"/><span>企業5</span>
          <input type="checkbox" id="6" value="6"/><span>企業6</span>
          <input type="checkbox" id="7" value="7"/><span>企業7</span>
          <input type="checkbox" id="8" value="8"/><span>企業8</span>
          <input type="checkbox" id="9" value="9"/><span>企業9</span>
          <input type="checkbox" id="10" value="10"/><span>企業10</span>
          <input type="checkbox" id="11" value="11"/><span>企業11</span>
          <input type="checkbox" id="12" value="12"/><span>企業12</span>
          <input type="checkbox" id="13" value="13"/><span>企業13</span>
          <input type="checkbox" id="14" value="14"/><span>企業14</span>
</div>
</BODY>
</HTML>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。