JS下拉复选框的实现

<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" onclick="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"  onclick="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>
时间: 2024-10-10 15:28:58

JS下拉复选框的实现的相关文章

自定义实现 PyQt5 下拉复选框 ComboCheckBox

一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下拉复选框,主要就是继承 QComboBox 类,然后将复选框 QCheckBox 加入其中,并实现相应的功能. 最终实现的下拉复选框效果如下: 二.代码实现 1.主要方法 在 PyQt5 中,有几个主要的方法需要了解一下,方法名称和对应的含义如下: QtWidgets.QComboBox.setVi

Mutiselect下拉复选框(保存和设置默认选中项)

HTML代码 <asp:DropDownList ID="ddlWarehouseIds" runat="server" CssClass="ddl"></asp:DropDownList> <input type="hidden" name="<%#Eval("WarehouseNames")%>" id="hid_<%#Eva

下拉复选框

$('#beerId').combobox({ url: '/index.php/Admin/Beer/getBeer', valueField: 'id', textField: 'text', panelHeight: 'auto', multiple: true, formatter: function (row) { var opts = $(this).combobox('options'); return '<input type="checkbox" class=&

js获取checkbox复选框获取选中的选项

js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现: var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field);

自己用ul模拟实现下拉多选框,

模拟实现下拉多选框 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../js/plugins/layui/css/lay

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

angular2.x 下拉多选框选择组件

angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云   链接:https://pan.baidu.com/s/1dEHwKmt 密码: mhta 下面贴代码: 界面 引用  selectList  是 下拉框的数据列表 redSelList() 方法是获取 选择完成后的数据 <app-select-checkbox [itemList]="selectL

原生js实现三级复选框

工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>三级复选框</title> </head> <body&

Js动态添加复选框Checkbox的实例方法!!!

首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement("input"); checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用 document.createTe