精华内容
下载资源
问答
  • 最近是因为用到了checkbox ,需要用jquery获取多选框的选择。虽然简单,但其实自己还是花了一小点时间(因为不太熟……),所以整理一下。顺便捎上了select下拉框,radio单选按钮。下面用小示例整理下如何获取...

    最近是因为用到了checkbox ,需要用jquery获取多选框的选择值。虽然简单,但其实自己还是花了一小点时间的(因为不太熟……),所以整理一下。顺便捎上了select下拉框,radio单选按钮。下面用小的示例整理下如何获取这些选择控件所选中的值。

     

    一、select下拉单选框

    测试页面:

     

     <label> select下拉框测试</label> <br/>
            <select id="select">
              <option value ="1">Volvo</option>
              <option value ="2">Saab</option>
              <option value="3">Opel</option>
              <option value="4">Audi</option>
            </select><br/>
             <input type="button" value="下拉框测试" οnclick="submit1()" /> <br/>
             <input type="button" value="下拉框设置选中" οnclick="set1()" /><br/><br/>

     测试js:

     

     

     $(function(){
       $("select").change(function() {//下拉框选项改变所触发的事件
       var index = $("select").get(0).selectedIndex;//获取下拉框所选中项的索引
       alert("选中的是第:" + (index+1) + "项!");
     });
    });
    
    function submit1() {
       var $selected = $("select").find("option:selected");//所选中的下拉框选项
         var text= $selected.text();//所选中的文本(显示在页面的文本)
        var val = $selected.val();//所选中的值(一般是提交给后台的值)
                   
       alert("选中的text:" + text + " ,value:" + val);
     }
                
     function set1() {
         var obj =  $("select").find("option[value='2']");//指定vlaue为2的下拉框选项(注意这种选择器的写法)
          obj.attr("selected", true);//指定该选项被选中
     }

    测试:默认情况下,select下拉框显示的(即选中的)是第一项(索引为0);当选中第'Opel'项时 ,会弹出:选中的是第3项;点击“下拉框测试”按钮时,弹出:选中的text:Opel, value:3;点击“下拉框设置选中”按钮时,下拉框显示选中的值会是:Saab。

    注:上面var index = $("select").get(0).selectedIndex用get(0)是因为$("select")选择器不能保证只得到单个确定的select下拉框(即使页面只有一个select),它得到的会是一个select的数组。所以你需要得到具体的select就需要用到下标了。

    小结:关于常见的select的取值的用法已经在上述js中,select只可提交单个值(是value而非text)到后台(通过name属性)。

     

    二、radio单选按钮

    测试页面:

     <label> radio单选框测试</label> <br/>
            <input type="radio" name="danx" value="sd" checked="checked" />学生 
            <input type="radio" name="danx" value="tea" />教师 
            <input type="radio" name="danx" value="adm" />管理员 <br/>
            
             <input type="button" value="单选按钮测试" οnclick="submit2()" /> <br/>
             <input type="button" value="单选框设置选中" οnclick="set2()" /><br/><br/>

     测试js:

     $(function(){
          $("input:radio").click(function() {
              alert("改变了选择");//单选按钮的点击事件  还有blur focus事件
           });
     });
    
     function set2() {
        var $checked = $("input[type=radio]").eq(2);//单选按钮中索引为2的选项("管理员"选项)
          //$checked.attr("checked", true);
           var $checked2 = $("input:radio[value='tea']");//单选按钮中value为tea的选项
           $checked2.attr("checked", true);
     }
                
     function submit2() {
         var $radio = $("input[type='radio']:checked");//获取选中的选项
           var val = $radio.val();//获取选中的选项的值value
           alert("选中的val:" + val);
                    
    }

     

    测试:同理,在默认情况下,单选按钮显示的选中的值是第一个。当我选中“教师”选项,时,会弹出“改变了选择”字样 。当我选择了"教师"选项时,会弹出:“选中的val:tea”。点击“单选框设置选中”按钮时,会发现页面的“教师”选项被选中。提交给后台的即是选中的val(通过name属性);

    上述简单的js已经说明了常见的radio单选按钮选中的值的用法。需要注意的是:一般radio单选按钮的各选项,name值必须各异,否则可以多选,从而违背单选的初衷。

     

    三、checkbox多选框

    测试页面:

      <label>多选框测试</label> <br/>
             <label>选项1</label><input name="checkbox" type="checkbox" value="value1" />
             <label>选项2</label><input name="checkbox" type="checkbox" value="value2" />
             <label>选项3</label><input name="checkbox" type="checkbox" value="value3" />
             <label>选项4</label><input name="checkbox" type="checkbox" value="value4" /><br/>
             
    <input type="button" value="多选按钮测试" οnclick="submit3()" />

     测试js:

    function submit() {
    $checkbox = $("input[name='checkbox']:checked");//这里的这种选择器是关键
    alert($checkbox.length);
    if($checkbox) {//表示有选中的多选框,此时为true;如果没有一个选中,这里会是false
           for(var i=0; i<$checkbox.length; i++) {
               alert($checkbox[i].value);//选中项的值
           }
         }
    }

     测试:点击“多选按钮测试”按钮时,当全不选时,弹出0(选中的数组的长度)。 当选中第一、三时,依次弹出:2 value1 value3;当选中第二、三、四时,依次弹出:3 value1 value3 value4 以此类推……

    但如果你直接尝试$checkbox的话,得到的永远是数组第一个元素的值!!

    同理,控制选项选中与否的语法为:$checkbox[i].attr("checked", true)——选中, $checkbox[i].attr("checked", false)——不选中。

    注:checkbox选中项永远是一个【数组】,这跟上面select和radio单选控件是不一样的,单选控件选项永远是单个对象,而checkbox哪怕你只选中一项,他也是一个只有一个元素的数组,此时当你想要用该选中项的语法时,必须是用get(0)或[0]来得到具体的对象。(而关于checkbox提交给后台的值(name属性),是由前端Js控制的,可以是用,分隔的字符串也可以是字符串数组)

     

    还需注意的一点是:一般情况下:只有jquery的id选择器可以得到确切的jquery对象,其他选择器诸如name选择器,class选择器等等,一般得到的是【jquery对象数组】,想取其中某个具体的对象,需要用下标[n],但用了下标也只是取到一个js对象,需要再次用$包装起来才是一个jq对象。如:

    var input = $("input[name='isinst']")[0];// $("input[name='isinst']")是一数组
     $(input).val("1");//$(input)才是jquery对象

     注:如果你用如name选择器$("input[name='isinst']").val(val)时,你会给所有name为isinst的input框赋值val,而你用$("input[name='isinst']").val()时,仅仅取到的是这个对象数组的第一个元素的value.

     

    本篇小结只总结了常见的选择控件如何用jquery获取选中值的用法。具体、详细的一些用法持续补充中。。

     

    Btw:通过parentElement属性获取父元素得到的是一个js对象,如果需要用jquery对象,需要用$()包装起来!

    ===============================================================================

     

     

    展开全文
  • 选框(Checkbox)是我们在开发Web系统中最常用的控件之一,但对于很开发朋友来说,特别是从事ASP.NET开发朋友来说,可能以前用惯了服务器端控件,对于如何正确使用js或者说jquery...
    复选框(Checkbox)是我们在开发Web系统中最常用的控件之一,但对于很多开发朋友来说,特别是从事ASP.NET开发的朋友来说,可能以前用惯了服务器端控件,对于如何正确的使用js或者说jquery来操作复选框(Checkbox)可能并不太熟悉:比如使用jquery获取指定ID的复选框的值,如何同时获取多个复选框的值,如何操作第一个或者指定顺序的复选框,如何设置复选框默认选中,如何判断复选框是否选中,如何实现复选框的全选,取消全选等操作都不太熟悉,所以今天特意整理了一下这方面的资料,希望对广大朋友有用。

    1、获取单个checkbox选中项(三种写法)
    $("input:checkbox:checked").val()
    或者
    $("input:[type='checkbox']:checked").val();
    或者
    $("input:[name='ck']:checked").val();

    2、 获取多个checkbox选中项
    $('input:checkbox').each(function() {
            if ($(this).attr('checked') ==true) {
                    alert($(this).val());
            }
    });

    3、设置第一个checkbox 为选中值
    $('input:checkbox:first').attr("checked",'checked');
    或者
    $('input:checkbox').eq(0).attr("checked",'true');

    4、设置最后一个checkbox为选中值
    $('input:radio:last').attr('checked', 'checked');
    或者
    $('input:radio:last').attr('checked', 'true');

    5、根据索引值设置任意一个checkbox为选中值
    $('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
    或者
    $('input:radio').slice(1,2).attr('checked', 'true');

    6、选中多个checkbox同时选中第1个和第2个的checkbox
    $('input:radio').slice(0,2).attr('checked','true');

    7、根据Value值设置checkbox为选中值
    $("input:checkbox[value='1']").attr('checked','true');

    8、删除Value=1的checkbox
    $("input:checkbox[value='1']").remove();

    9、删除第几个checkbox
    $("input:checkbox").eq(索引值).remove();索引值=0,1,2....
    如删除第3个checkbox:
    $("input:checkbox").eq(2).remove();

    10、遍历checkbox
    $('input:checkbox').each(function (index, domEle) {
    //写入代码
    });

    11、全部选中
    $('input:checkbox').each(function() {
            $(this).attr('checked', true);
    });

    12、全部取消选择
    $('input:checkbox').each(function () {
            $(this).attr('checked',false);
    });
    展开全文
  • 1.form.serialize()是传递一个form中的所有控件,flask route中是根据name名称获得对应的值的,其中涉及多选框checkbox的问题,当多选框中option的name相同的时候,用request.form.get()是无法获得对应的值的,只...

    1.form.serialize()是传递一个form中的所有控件,flask route中是根据name名称获得对应的值的,其中涉及多选框checkbox的问题,当多选框中option的name相同的时候,用request.form.get()是无法获得对应的值的,只能够获得一个值,后边的值无法获取,此时可以用request.form.getlist(name).具体代码如下:
    在这里插入图片描述

    data_dict[param] = tuple(request.form.getlist(l)) 
    

    一定会牢记这个函数 查了好久,最后还是问老大解决的。哈哈哈哈哈哈。。。。。。。。。。

    展开全文
  • Java web 常用方法/类 ---- 第一天

    千次阅读 2020-09-18 14:03:17
    获取除了多选框之外的普通控件的值(单个值):getParameter2.多选框的值如何进行获取(多个值):getParameterValues3.客户端提示:PrintWriter 注:不能直接new PrintWriter对象4.重定向:sendRedirect5.请求转发及设置...

    1.获取除了多选框之外的普通控件的值(单个值):getParameter
    //java
    String id=request.getParameter("id");
    int i = new Integer(id)//将String转化为int
    
    //html
    <form action="dologin" method="post">
    	id:<input name="id" /><br />
    	<input type="submit" value="提交" />
    </form>
    
    2.多选框的值如何进行获取(多个值):getParameterValues
    String []arr=request.getParameterValues("name");	
    
    //html
    <form action="dologin" method="post">
    	name1:<input name="name" /><br />
    	name2:<input name="name" /><br />
    	name3:<input name="name" /><br />
    	<input type="submit" value="提交" />
    </form>
    
    3.客户端提示:PrintWriter 注:不能直接new PrintWriter对象
    //java
    import java.io.PrintWriter;
    PrintWriter out=response.getWriter();//自己new的,不具备向客户端写出的能力
    out.println("我是返回给客户端的数据!");
    
    4.重定向:sendRedirect
    //java
    //参数为另一个servlet地址
    response.sendRedirect("preshowdept");
    
    5.请求转发及设置前端可以访问的值:setAttribute

    5.1简易版

    //java
    request.setAttribute("id",1);
    request.getRequestDispatcher("page.jsp").forward(request, response);
    
    //html
    <body>
    	<%=request.getAttribute("id") %>
    </body>
    

    5.2进阶版

    //java
    //从数据库中分页读取泛型为Dept的数据
    List<Dept> list=dao.findByPage(pagenow,pagesize);
    //将list放置与setAttribute中
    request.setAttribute("list", list);
    //请求转发到showdept.jsp页码
    request.getRequestDispatcher("showdept.jsp").forward(request, response);
    
    //html
    <tr>
    	<th>DeptNo</th>
    	<th>Dname</th>
    	<th>Loc</th>
    </tr>
    <%
    	List<Dept> list=(List<Dept>)request.getAttribute("list");
    	int size=list.size();
    	for(int i=0;i<size;i++){
    		Dept d=list.get(i);
    %>
    <tr >
    	<td><%=d.getDeptno() %></td>
    	<td><%=d.getDname() %></td>
    	<td><%=d.getLoc() %></td>
    </tr>
    <%	} %>
    

    在这里插入图片描述

    展开全文
  • 表单提交两种方式

    千次阅读 2017-09-07 20:00:57
    表单的中如何获取input等控件的属性  先获取控件  Document.getElements*******  表单名.控件名  Value 如何判断单选框和多选框是否选中?  根据checked属性如果选中返回true,否则返回false 如何提交...
  • C#全能速查宝典

    热门讨论 2014-04-26 16:16:27
    2.3.1 CheckBox控件——复选框控件 188 2.3.2 CheckBoxes属性——是否显示复选框 190 2.3.3 Checked属性——复选框是否处于选中状态 190 2.3.4 CheckedChanged事件——Checked属性更改时发生 191 2.3.5 ...
  • 实例077 带复选框的树状菜单 98 2.9 其他控件典型应用 100 实例078 TrackBar的简单应用 100 实例079 SplitContainer的应用 102 实例080 MaskedTextBox控件的简单应用 103 实例081 制作日历计划任务 105 ...
  • C#编程经验技巧宝典

    热门讨论 2008-06-01 08:59:33
    115 <br>0192 如何获取“我文档”系统文件夹路径 115 <br>0193 如何获取应用程序当前执行路径 116 <br>0194 如何获取当前操作系统信息 116 <br>0195 如何实现基本数据类型随意转换 116...
  • 实例260 实现带复选框的TreeView控件 实例261 将数据库数据显示到树视图中 实例262 用树型列表动态显示菜单 实例263 用TreeView控件遍历磁盘目录 实例264 修改TreeView控件的节点文本 实例265 将XML文件节点...
  • 实例260 实现带复选框的TreeView控件 实例261 将数据库数据显示到树视图中 实例262 用树型列表动态显示菜单 实例263 用TreeView控件遍历磁盘目录 实例264 修改TreeView控件的节点文本 实例265 将XML文件节点...
  • 实例260 实现带复选框的TreeView控件 实例261 将数据库数据显示到树视图中 实例262 用树型列表动态显示菜单 实例263 用TreeView控件遍历磁盘目录 实例264 修改TreeView控件的节点文本 实例265 将XML文件节点...
  • 主要内容有C#开发环境的使用、C#语言基础应用、字符串处理技术、数组和集合的使用、面向对象编程技术、数据结构与算法、Windows窗体基础、特色窗体界面、窗体控制技术、MDI窗体和继承窗体、Windows常用控件的使用、...
  • 实例062 如何获取对象实例私有域地址 实例063 获取字符串第一个字地址 实例064 获取变量地址 实例065 获取数组地址 实例066 获取自定义过程地址 3.5 地址调用 实例067 传递对象指针 实例068 传递...
  • 主要内容有C#开发环境的使用、C#语言基础应用、字符串处理技术、数组和集合的使用、面向对象编程技术、数据结构与算法、Windows窗体基础、特色窗体界面、窗体控制技术、MDI窗体和继承窗体、Windows常用控件的使用、...
  • 268 理解间接操作:获得指针所指向的值 269 理解指针数组:指向指针的指针 270 初始化指针数组 271 理解转换:暂时修改变量类型 272 自动类型转换:混合int和char类型的变量 273 转换指针:危险的迹象 第二十四章 ...
  • 实例202 GridView复选框绑定列设置商品是否上架 320 实例203 使用主题来设置GridView控件的外观 322 7.3 GridView控件72般绝技 323 实例204 实现搜索GridView个关键字高亮显示 323 实例205 高亮显示数据行并实现...
  • 实例202 GridView复选框绑定列设置商品是否上架 320 实例203 使用主题来设置GridView控件的外观 322 7.3 GridView控件72般绝技 323 实例204 实现搜索GridView个关键字高亮显示 323 实例205 高亮显示数据行并实现...
  • 实例202 GridView复选框绑定列设置商品是否上架 320 实例203 使用主题来设置GridView控件的外观 322 7.3 GridView控件72般绝技 323 实例204 实现搜索GridView个关键字高亮显示 323 实例205 高亮显示数据行并实现...
  • 268 理解间接操作:获得指针所指向的值 269 理解指针数组:指向指针的指针 270 初始化指针数组 271 理解转换:暂时修改变量类型 272 自动类型转换:混合int和char类型的变量 273 转换指针:危险的迹象 第二十四章 ...
  • 268 理解间接操作:获得指针所指向的值 269 理解指针数组:指向指针的指针 270 初始化指针数组 271 理解转换:暂时修改变量类型 272 自动类型转换:混合int和char类型的变量 273 转换指针:危险的迹象 第二十四章 ...
  • 268 理解间接操作:获得指针所指向的值 269 理解指针数组:指向指针的指针 270 初始化指针数组 271 理解转换:暂时修改变量类型 272 自动类型转换:混合int和char类型的变量 273 转换指针:危险的迹象 第二十四章 ...
  • 每个控件的源代码都有详细中文注释,都按照统一设计规范编写,方便学习自定义控件的编写。 每个控件默认配色和demo对应的配色都非常精美。 超过130个可见控件,6个不可见控件。 部分控件提供多种样式风格选择,多种...
  • 实例075 带复选框的ListView控件 99 2.7 TreeView控件应用 100 实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 修改TreeView控件...
  • C#程序开发范例宝典(第2版).part02

    热门讨论 2012-11-12 07:55:11
    实例075 带复选框的ListView控件 99 2.7 TreeView控件应用 100 实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 修改...
  • C#程序开发范例宝典(第2版).part13

    热门讨论 2012-11-12 20:17:14
    实例075 带复选框的ListView控件 99 2.7 TreeView控件应用 100 实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 修改...
  • 程序开发范例宝典>>

    2012-10-24 10:41:28
    实例075 带复选框的ListView控件 99 2.7 TreeView控件应用 100 实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 ...
  • 实例075 带复选框的ListView控件 99 2.7 TreeView控件应用 100 实例076 将数据库数据显示到树视图中 100 实例077 用TreeView控件制作导航界面 102 实例078 用TreeView控件遍历磁盘目录 102 实例079 修改...

空空如也

空空如也

1 2 3 4 5 6
收藏数 101
精华内容 40
关键字:

如何获取多选框控件的值