jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交。

其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便,但是获取复选框和单选按钮的值确比较麻烦。

今天闲来无事封装了一个函数,以后获取复选框和单选按钮的值就只需要调用这个函数,传入jquery选择器就可以了,下面附上函数。

函数

/**
 * 获取单个或一组输入元素的选中项
 * 传入Jquery选择器
 * 支持:text,返回:文本
 * 支持:hidden,返回:文本
 * 支持:password,返回:文本
 * 支持:textarea,返回:文本
 * 支持:select,返回:1
 * 支持:checkbox,返回:1,2,3,4,5,6
 * 支持:radio,返回:1
 * 20161203
*/
function get_choose(choose){
    var choose_size    =    $(choose).size();
    var choose_type    =    $(choose+‘:eq(0)‘).attr(‘type‘);
    var return_text    =    ‘‘;
    for(var i=0;i<choose_size;i++){
        //如果是复选框或者单选按钮需要做特殊处理
        if(choose_type==‘checkbox‘ || choose_type==‘radio‘){
            //判断元素是否被选中,选中才处理
            if($(choose+‘:eq(‘+i+‘)‘).is(‘:checked‘)){
                //如果复选框被选中,获取其值,继续执行获取下一个
                if(choose_type==‘checkbox‘){
                    return_text    +=    (return_text!=‘‘)?‘,‘+$(choose+‘:eq(‘+i+‘)‘).val():$(choose+‘:eq(‘+i+‘)‘).val();
                }
                //如果是单选按钮被选中,获取其值,终止循环
                else if(choose_type==‘radio‘){
                    return_text    +=    $(choose+‘:eq(‘+i+‘)‘).val();
                    break;
                }
                else{
                    break;
                }
            }
        }
        //其他元素属性,直接返回其value值,终止循环
        else{
            return_text    +=    $(choose+‘:eq(0)‘).val();
            break;
        }
    }
    return return_text;
}

调用方式

alert(get_choose(‘[name="文本框name名"]‘));
alert(get_choose(‘[name="文本域name名"]‘));
alert(get_choose(‘[name="多选框name名"]‘));
alert(get_choose(‘[name="单选框name名"]‘));
时间: 2024-10-05 23:26:56

jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值的相关文章

模拟多级复选框效果--jquery

今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c

11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

1.jquery取复选框的值 <!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

通过jQuery获取一组checkbox的选中项并显示在HTML页面中

这里是jQuery代码 $(function () { $("input[name=names]").click(function () { //获得所有的name=names的input,并给他们添加click监听事件 var arr = new Array(); $("input[name=names]:checked").each(function (key, value) { arr[key] = $(value).val(); }); $("#g

layerui中如何点击表格行让复选选中并可以监听到复选框选中这个事件。

$(document).on("click",".layui-table-body table.layui-table tbody tr",function(){ var obj = event ? event.target : event.srcElement; var tag = obj.tagName; var checkbox = $(this).find("td div.laytable-cell-checkbox div.layui-form-

jquery特效(6)—判断复选框是否选中进行答题提示

前面有一段时间思想开了小差,跟着师父学习了一段时间才发现差距很大,看来我要奋起直追~\(≧▽≦)/~啦啦啦. 最近公司在做一个项目,需要根据用户选择的选项给出相应的提示,下面来看我写的测试程序的效果: 一.实现的原理: 第一步:判断用户选择哪一项,即哪个复选框被选中 第二步:根据复选框的选中情况给出相应的提示 二.下面来看主体程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

【jQuery】复选框的全选、反选,判断哪些复选框被选中

本文与<[JavaScript]复选框的全选.反选,判断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,同样做到如下的效果: 布局还是同样的布局,只是由于在jQuery框架中,无须再为按钮,指定特定的onclick事件处理函数,直接使用jQuery指定即可: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri

jquery 使用attr() 函数对复选框无效的原因

 复选框是网站开发的时候经常用到的网页标签之一,常见的在页面上对复选框的操作包括取值和修改复选框的状态.在jquery中,常见的操作标签的值得函数为attr,然而在操作复选框的时候,通常采用的却是prop,因为关于复选框的值,来自于properties而不是attributes. 举个例子: 以下代码是获取checkbox的值,并在控制台打印 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <me

JS获取选中的复选框的值

得到选中name为checkboxName的复选框的元素 $('input:checkbox[name=checkboxName]:checked').each(function () { var idAndStatus = $(this).val(); ; });

JQuery的复选框选中、取消、全选,全不选问题

一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#ServiceManageMent").click(function(){ if(this.checked){ $(".checkb3").each(function(){ this.checked = true; $(this).val(1); }); }else{ $("