成都网站建设设计

将想法与焦点和您一起共享

Jquery常用表单元素操作总结

    页面当中经常要做一些checkbox,radio,select,input等表单元素的操作。做为我这样的懒人早就该总结以下,免去用到的时候,不想从头写,又不得不去以前的代码中翻。下面的代码来自实际项目中,亲测可用。呵呵……

专注于为中小企业提供成都网站制作、成都做网站、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业朝阳县免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

一、checkbox

对checkbox的判断往往是checkbox有没有被勾选。也经常有一个复选框控制其它全部复选框的选中和取消选中。如下图:

Jquery常用表单元素操作总结

页面左上角的复选框的选中控制表格中所有的复选框。代码如下:

为了操作方便,给控制全选的复选框增加一个id叫checkAll

下面的代码实现了全选和反选的效果

 

$('#checkAll').change(function(){
    if($(this).is(':checked')){
        $("input[type='checkbox']").prop("checked", true);
    }else{
        $("input[type='checkbox']").prop("checked", false);
    }
});

获取所有选中的checkbox的值

以上图为例,我要获取表格中每一行记录的id值,则给每一个checkbox增加一个value属性,在渲染页面时将value值写到checkbox中即可。另外为了方便选取checkbox为所有的checkbox增加了一个chkbox的class。

function checkValue(){
    var arr = ''
    $(".chkbox").each(function(){
        if($(this).is(":checked")){
            arr += ($(this).val() + ',')
        }
    })
    return arr
}

未完待续……


新闻名称:Jquery常用表单元素操作总结
链接地址:http://chengdu.cdxwcx.cn/article/jiisgo.html