如何使用jquery获取html表单的每个客户端控件的名称name和value值以json格式返回

如何使用jquery获取html表单的每个客户端控件的名称name和value值以json格式返回,第1张

放到<form></form>里,直接使用 var arr=$("form")serializeArray(); 这样就获取到了name-value的数组

var arr=new Array();

$(':checkbox')each(function(i){

arr[i]=$(this)val();

});

这个数组就会存储checkbox的所有值了

js:

function add(){

$("<input name="txt[]" type="text" />")appendTo(pId);

}

count(){

$("inpu [name='txt']")val();

}

html:

<div id = "pId"></div>

<input type="button" value="add" onclick="add"/>

<input type="button" value="count" onclick="count()" />

这里所有的input name都等于txt ,获取值的时候应该是一个数组,不然name就不能一样的。

var str = '';

$('form')find('input,select,textarea')each(function(){

    str += $(this)val();

})

思路:

表单元素(多种类型)遍历,获取到其值拼接;

将得到str拼接后的字符串,把它赋值给多行文本框!

直接用js里的getElementsByName就可以获取所以name值相同的元素。但获取出来的并不是数组,而是类数组的元素集合。所以还需要一步变换,下面是简单代码:

        <body>

<input type="text" name="111" />

<input type="text" name="111" />

<input type="text" name="111" />

<input type="text" name="111" />

<input type="text" name="111" />

<input type="text" name="111" />

<input type="text" name="111" />

<input type="text" name="111" />

</body>

<script>

    var oInp = documentgetElementsByName('111');

    var aInp = [];

    for(var i=0;i<oInplength;i++){

        aInppush(oInp[i]);

    }

</script>   //这样aInp这个数组里存储的就是所以元素name为111的数组。

 Jquery获取选中radio的值方式很多:

1获取选中值,三种方法都可以:

$('input:radio:checked')val();

$("input[type='radio']:checked")val();

$("input[name='rd']:checked")val();2设置第一个Radio为选中值:

$('input:radio:first')attr('checked', 'checked');

或者

$('input:radio:first')attr('checked', 'true');

注:attr("checked",'checked')= attr("checked", 'true')= attr("checked",    true)3设置最后一个Radio为选中值:

某一个text中?

$("button")click(function(){

  x=$("form")serializeArray();

  $each(x, function(i, field){

    $("#text")val($("#text")val() + "" + fieldvalue + " ");

  });

});

以上就是关于如何使用jquery获取html表单的每个客户端控件的名称name和value值以json格式返回全部的内容,包括:如何使用jquery获取html表单的每个客户端控件的名称name和value值以json格式返回、jquery 如何获得表单里的值、每点击一次“添加”按钮生成输入表单,最后将所有表单的值获取,用如何jQuery实现谢谢各位大侠!!等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9868335.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-02
下一篇2023-05-02

发表评论

登录后才能评论

评论列表(0条)

    保存