JS下拉复选框的实现

最新推荐文章于 2023-02-12 14:55:40 发布
年华似水
最新推荐文章于 2023-02-12 14:55:40 发布
阅读量8.9k
点赞数 2
分类专栏： JS
本文链接：https://blog.youkuaiyun.com/czw698/article/details/39322529
版权
JS 专栏收录该内容
1 篇文章
订阅专栏
<html>
  <head>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.easyui.min.js" ></script>
    <link   rel="stylesheet" href="css/themes/metro/easyui.css" ></link>
    <link   rel="stylesheet" href="css/themes/icon.css" ></link>
  </head>
  <body>
  <form class="ui-forms p20" > 
  <input type="text" id="ysvalue" >
                 <fieldset>
                    <legend>反作弊数据导出</legend>
                    <div class="pt20">
                    <table>
                       <tr>
                        
                        <td><label style="float: none">团单&nbsp;&nbsp;</label>
                        <input type="text"  id="byJobName" name="byJobName" value="" size="20" ></td>
                        <td><input type="checkbox"  id="byJobName" name="byJobName" value="" size="20" >只看黑名单团单</td>
                       </tr>
                       <tr>
                        <td><label style="float: none">订单ID</label>
                        <input type="text"  id="byJobClass" name="byJobClass" value="" size="20" ></td>
                        <td><label style="float: none">券码ID</label>
                        <input type="text"  id="byJobClass" name="byJobClass" value="" size="20" ></td>
                       </tr>
                       <tr>
                        <td><label style="float: none">预算</label>
                            <select id="cc" style="width:150px"></select>
<span style="white-space:pre">	</span>                          <div id="sp">
<span style="white-space:pre">		</span>                        <input type="checkbox" id="ysqu" value="01" οnclick="ysqx();"><span>全选</span><br/>
<span style="white-space:pre">		</span>                        <input type="checkbox" id="lang" value="01"><span>Java</span><br/>
<span style="white-space:pre">		</span>                        <input type="checkbox" id="lang" value="02"><span>C#</span><br/>
<span style="white-space:pre">		</span>                        <input type="checkbox" id="lang" value="03"><span>Ruby</span><br/>
<span style="white-space:pre">		</span>                        <input type="checkbox" id="lang" value="04"><span>Basic</span><br/>
<span style="white-space:pre">		</span>                        <input type="checkbox" id="lang" value="05"><span>Fortran</span>
<span style="white-space:pre">	</span>                          </div>
                        </td>
                        <td>&nbsp;</td>
                         <td><button type="button" class="ui-button-red ui-button ui-widget ui-Status-default ui-corner-all ui-button-text-only"  οnclick="search();" > &nbsp;查&nbsp; 询&nbsp; </button>
                             <button type="button" id="btnReset" name="btnReset" class="ui-button-red ui-button ui-widget ui-Status-default ui-corner-all ui-button-text-only" > &nbsp;重&nbsp; 置&nbsp; </button>
                        </td>
                        </tr></table>
                    </div>
                </fieldset>
        </form>
  <body>
</html>


<script type="text/javascript">
// ready后把复选框列表加载到对应的select组里
$(function(){
  $('#cc').combo({required:true,editable:false});
  $('#sp').appendTo($('#cc').combo('panel'));
  $('#sp input').click(function(){
    var s = "";
    if ($(this).attr("checked")){
      // 当前复选框是选中状态
      s = $(this).next('span').text();
      $('#cc').combo('setText', s);
    } else {
      // 当前复选框是非选中状态，则找最近一个选中的状态，如果没有返回空值
      for (var i=0;i<lang.length;i++ ){
        if(lang[i].checked){
          s = $(lang[i]).next('span').text();
          break;
        }
      }
      $('#cc').combo('setText', s);
    }
  });
});


// 点击查询按钮
function search(){
  var value = "";
  for (var i=0;i<lang.length;i++ ){
     if(lang[i].checked){
        value=value+lang[i].value + ",";
     }
  }
  // 获取所有选中的复选框的值，把值填充到一个text里方便后面使用
  ysvalue.value = value;
}


// 预算下拉复选框全选
function ysqx(){
   if (ysqu.checked) {
      // 选中全选，让所有复选框选中
      for (var i=0;i<lang.length;i++ ){
         lang[i].checked = true; 
      }
   } else {
      // 取消全选
      for (var i=0;i<lang.length;i++ ){
         lang[i].checked = false; 
      }
   }
}
</script>