遍历控件并取值

最新推荐文章于 2021-12-07 13:29:08 发布
原创 最新推荐文章于 2021-12-07 13:29:08 发布 · 469 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文档通过示例展示了如何使用 jQuery 获取 HTML 表单中不同元素的值，包括文本框、复选框、单选按钮及下拉列表等，并以 JSON 格式返回收集的数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>

</head>
<body>

<div id="xxx">  
<div class="col-md-12">
    <div class="form-group">
        <label class="col-sm-3 control-label">文本框：</label>
        <div class="col-sm-9">
            <input type="text" name="aaa" id="aa" class="form-control" placeholder="请输入文本" value="sssss"> <span class="help-block m-b-none">说明文字</span>
      <input type="text" name="aaa" id="aa" class="form-control" placeholder="请输入文本" value="ssssbbbbs"> <span class="help-block m-b-none">说明文字</span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">单选框：</label>
        <div class="col-sm-9">
            <label class="radio-inline">
                <input type="radio" checked="" value="option1ss" id="optionsRadios1" name="optionsRadios">选项1</label>
            <label class="radio-inline">
                <input type="radio" value="option2ggg" id="optionsRadios2" name="optionsRadios">选项2</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">复选框：</label>
        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="checkbox" value="option1"  id="inlineCheckbox1">选项1</label>
            <label class="checkbox-inline">
                <input type="checkbox" value="option2" id="inlineCheckbox2">选项2</label>
            <label class="checkbox-inline">
                <input type="checkbox" value="option3" id="inlineCheckbox3">选项3</label>
        </div>
    </div>
</div>
<label class="col-sm-3 control-label">下拉列表：</label>
<div class="col-sm-9">
    <select class="form-control" name="" id="ttt">
        <option value="aa">选项 1</option>
        <option value="bb">选项 2</option>
        <option value="cc" >选项 3</option>
        <option value="dd">选项 4</option>
    </select>
</div>


</div> 
<button id="show" type="button">显示</button>
<script type="text/javascript">


 $("#show").click(function(){
$("input[type=checkbox]:checked").each(function(){ 
    alert($(this).val());  
}); 

$("input[type=text]").each(function(){ 
    alert($(this).val());  
}); 

     $("select").each(function() { 

  //  alert($(this).attr('id')); 

 alert($("#"+$(this).attr('id')+"").val()); 
});



  });
</script>
</body>
</html>




<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>

</head>
<body>

<div id="xxx">  
<div class="col-md-12">
    <div class="form-group">
        <label class="col-sm-3 control-label">文本框：</label>
        <div class="col-sm-9">
            <input type="text" name="aaa" id="aa" class="form-control" placeholder="请输入文本" value="sssss"> <span class="help-block m-b-none">说明文字</span>
      <input type="text" name="aaa" id="aa" class="form-control" placeholder="请输入文本" value="ssssbbbbs"> <span class="help-block m-b-none">说明文字</span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">单选框：</label>
        <div class="col-sm-9">
            <label class="radio-inline">
                <input type="radio" checked="" value="option1ss" id="optionsRadios1" name="optionsRadios">选项1</label>
            <label class="radio-inline">
                <input type="radio" value="option2ggg" id="optionsRadios2" name="optionsRadios">选项2</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">复选框：</label>
        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="checkbox" value="option1"  id="inlineCheckbox1">选项1</label>
            <label class="checkbox-inline">
                <input type="checkbox" value="option2" id="inlineCheckbox2">选项2</label>
            <label class="checkbox-inline">
                <input type="checkbox" value="option3" id="inlineCheckbox3">选项3</label>
        </div>
    </div>
</div>
<label class="col-sm-3 control-label">下拉列表：</label>
<div class="col-sm-9">
    <select class="form-control" name="" id="ttt">
        <option value="aa">选项 1</option>
        <option value="bb">选项 2</option>
        <option value="cc" >选项 3</option>
        <option value="dd">选项 4</option>
    </select>
</div>


</div> 
<button id="show" type="button">显示</button>
<script type="text/javascript">


 $("#show").click(function(){
var aaa="[";
$("input[type=checkbox]:checked").each(function(){ 
  //  alert($(this).val());  
aaa+="{\""+$(this).attr('id')+"\":\""+$(this).val()+"\"},";
}); 

$("input[type=text]").each(function(){ 
 //   alert($(this).val());  
aaa+="{\""+$(this).attr('id')+"\":\""+$(this).val()+"\"},";
}); 

     $("select").each(function() { 

  //  alert($(this).attr('id')); 

// alert($("#"+$(this).attr('id')).val()); 
aaa+="{\""+$(this).attr('id')+"\":\""+$("#"+$(this).attr('id')).val()+"\"}";
});
aaa+="]"
 alert(aaa); 

  });
</script>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>

</head>
<body>

<div id="xxx">  
<div class="col-md-12">
    <div class="form-group">
        <label class="col-sm-3 control-label">文本框：</label>
        <div class="col-sm-9">
            <input type="text" name="aaa" id="aa" class="form-control" placeholder="请输入文本" value="sssss"> <span class="help-block m-b-none">说明文字</span>
      <input type="text" name="aaa" id="aa" class="form-control" placeholder="请输入文本" value="ssssbbbbs"> <span class="help-block m-b-none">说明文字</span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">单选框：</label>
        <div class="col-sm-9">
            <label class="radio-inline">
                <input type="radio" checked="" value="option1ss" id="optionsRadios1" name="optionsRadios">选项1</label>
            <label class="radio-inline">
                <input type="radio" value="option2ggg" id="optionsRadios2" name="optionsRadios">选项2</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">复选框：</label>
        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="checkbox" value="option1"  id="inlineCheckbox1">选项1</label>
            <label class="checkbox-inline">
                <input type="checkbox" value="option2" id="inlineCheckbox2">选项2</label>
            <label class="checkbox-inline">
                <input type="checkbox" value="option3" id="inlineCheckbox3">选项3</label>
        </div>
    </div>
</div>
<label class="col-sm-3 control-label">下拉列表：</label>
<div class="col-sm-9">
    <select class="form-control" name="" id="ttt">
        <option value="aa">选项 1</option>
        <option value="bb">选项 2</option>
        <option value="cc" >选项 3</option>
        <option value="dd">选项 4</option>
    </select>
</div>


</div> 
<button id="show" type="button">显示</button>
<script type="text/javascript">


 $("#show").click(function(){
var aaa="[";
$("input[type=checkbox]:checked").each(function(){ 
  //  alert($(this).val());  
aaa+="{\""+$(this).attr('id')+"\":\""+$(this).val()+"\"},";
}); 

$("input[type=text]").each(function(){ 
 //   alert($(this).val());  
aaa+="{\"name\":\""+$(this).attr('id')+"\",\"value\":\""+$(this).val()+"\"},";
}); 

     $("select").each(function() { 

  //  alert($(this).attr('id')); 

// alert($("#"+$(this).attr('id')).val()); 
aaa+="{\"name\":\""+$(this).attr('id')+"\",\"value\":\""+$("#"+$(this).attr('id')).val()+"\"}";
});
aaa+="]"
 alert(aaa); 

  });
</script>
</body>
</html>




<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>

</head>
<body>

<div id="xxx">  
<div class="col-md-12">
    <div class="form-group">
        <label class="col-sm-3 control-label">文本框：</label>
        <div class="col-sm-9">
            <input type="text" name="aaa" id="aa" class="form-control" placeholder="请输入文本" value="sssss"> <span class="help-block m-b-none">说明文字</span>
      <input type="text" name="aaa" id="aa" class="form-control" placeholder="请输入文本" value="ssssbbbbs"> <span class="help-block m-b-none">说明文字</span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">单选框：</label>
        <div class="col-sm-9">
            <label class="radio-inline">
                <input type="radio" checked="" value="option1ss" id="optionsRadios1" name="optionsRadios">选项1</label>
            <label class="radio-inline">
                <input type="radio" value="option2ggg" id="optionsRadios2" name="optionsRadios">选项2</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">复选框：</label>
        <div class="col-sm-9">
            <label class="checkbox-inline">
                <input type="checkbox" value="option1"  id="inlineCheckbox1">选项1</label>
            <label class="checkbox-inline">
                <input type="checkbox" value="option2" id="inlineCheckbox2">选项2</label>
            <label class="checkbox-inline">
                <input type="checkbox" value="option3" id="inlineCheckbox3">选项3</label>
        </div>
    </div>
</div>
<label class="col-sm-3 control-label">下拉列表：</label>
<div class="col-sm-9">
    <select class="form-control" name="" id="ttt">
        <option value="aa">选项 1</option>
        <option value="bb">选项 2</option>
        <option value="cc" >选项 3</option>
        <option value="dd">选项 4</option>
    </select>
</div>


</div> 
<button id="show" type="button">显示</button>
<script type="text/javascript">


 $("#show").click(function(){
var aaa="[";
$("input[type=checkbox]:checked").each(function(){ 
  //  alert($(this).val());  
aaa+="{\"name\":\""+$(this).attr('id')+"\",\"value\":\""+$(this).val()+"\"},";
}); 

$("input[type=text]").each(function(){ 
 //   alert($(this).val());  
aaa+="{\"name\":\""+$(this).attr('id')+"\",\"value\":\""+$(this).val()+"\"},";
}); 

$("input[type=radio]:checked").each(function(){ 
 //   alert($(this).val());  
aaa+="{\"name\":\""+$(this).attr('id')+"\",\"value\":\""+$(this).val()+"\"},";
}); 



     $("select").each(function() { 

  //  alert($(this).attr('id')); 

// alert($("#"+$(this).attr('id')).val()); 
aaa+="{\"name\":\""+$(this).attr('id')+"\",\"value\":\""+$("#"+$(this).attr('id')).val()+"\"}";
});
aaa+="]"
 alert(aaa); 

  });
</script>
</body>
</html>


VBA中在窗体中遍历所有checkbox控件，提取出被选中的checkbox的caption值
**My Coding Family**
08-12 1641
🏆本文收录于《优快云问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
C# 遍历控件或类的属性（设置取得）其值
linrenchao的专栏
04-29 859
using System.Reflection;         PropertyInfo[] pis = null;              //对象所有属性组成的集合 propertys          string val = null;                    ent = new    myClass();    //ent 为控件或者类实例        
winform 批量控件取值赋值
weixin_33756418的博客
09-19 824
以前写winform 最多写几个文本框，最近需要入录一个人员信息，那好几十个字段，一下子干蒙了，这要是一个个取值赋值都写到明天了，于是就自己写了个方法，也不是什么高大上的，就是很简单很普通很low的方法。 废话少说上代码，注意，这块我就用了个文本框，你也可以找到所有控件，尽量控件name与实体字段一样。 public Dictionary<string, object>...
Jquery 获取指定 table下 所有 type='text' 的 input
ID1292904917的专栏
12-08 925
其中 aaa  是table 的 id$("#aaa :input[type=text]").each(function(i){     alert(this.value);    this.value = ""; });  注意 #aaa :input[type=text]  不能写成 [@type=text]  
JS遍历控件取值,去某行的所有控件的值
ws_hgo的专栏
09-11 5837
JS遍历控件取值 <!-- function Submit() { var Text=document.getElementsByTagName("input"); var Array=""; for(var i=0;i<Text.length;i++) {
wpf 遍历控件及其值
changtianyi的专栏
11-09 87
/// <summary> /// 遍历控件及其值 /// </summary> /// <param name="uiControls">界面控件</param> private void SetNotEditable(UIElementCollection uiCon...
JS遍历控件取值
奥利奥泡馍的专栏
01-20 797
JS遍历控件取值以及单选框是否选中 function baidu(){ var radios = document.getElementsByName("a"); var input = document.getElementsByName("b"); var flag = 0; for (var i = 0;i < radios.length;i++) { if (radio
C# 遍历对象属性取值赋值
weixin_30284355的博客
03-13 283
TJlb_Mod tJlb = new TJlb_Mod(); System.Reflection.PropertyInfo[] properties = tJlb.GetType().GetProperties(); //循环属性取值 foreach (System.Reflection...
JQuery动态添加input控件并取值
qq_42799116的博客
12-07 2162
JQuery动态添加input控件并取值
基于Jquery的动态添加控件并取值的实现代码
10-28
总结，基于JQuery的动态添加控件和取值的实现主要依赖于DOM操作和事件监听。通过理解这段代码，我们可以为网页提供更加灵活和交互式的用户体验。然而，实现完整的后台取值方法取决于具体的技术栈和服务器端语言，如...
Jquery给基本控件的取值、赋值示例
10-25
它使得HTML文档遍历和操作、事件处理、动画和Ajax变得非常简单。JQuery的一个重要应用就是与各种HTML表单控件打交道。表单控件是构建网页应用程序时最常使用到的元素，例如文本框（TEXTBOX）、标签（LABEL）、单选...
autojs遍历当前页面所有控件_HTML5表单和表单控件的使用
weixin_39972567的博客
11-20 1046
哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！志同道合的小伙伴跟我一起学习交流哦！第一阶段 HTML508 表单和表单控件1 表单的作用表单标签input(掌握)表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件(也称为表单元素)...
Bootstrap list click 事件
xhhuang1979的专栏
12-29 3880
Bootstrap list click 事件             hello1 hello2 hello3 hello4 hello5    $("#xxx a").on("click", function() {      // $("a").removeClass("active");     //  $(this).ad
Jquery mobile 手势代码,用的时候老是不太稳定且不流畅（可能和我的手机有关），不过也找不到更合适的东西。留下
xhhuang1979的专栏
11-04 2956
$(document).on('pageinit', function(event){ $('div.ui-page').on("swipeleft", function () { var nextpage = $(this).next('div[data-role="page"]'); if (nextpage.length > 0) { $.mobile
JQUERY .closest() .parents()区别
xhhuang1979的专栏
12-11 502
.ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } I II A B 1 2 3 C
页面导成CSV
xhhuang1979的专栏
03-31 323
$(document).on("click", "#export", function(e){ var tdhtml=""; $("#mlist").find("th").each(function () { tdhtml=tdhtml+$(this).html()+"," }); tdhtml=tdhtml+"员工编码,加班日期,加班开始时间,是否跨天,加班结束时间,是
中层管理者的必备素质.doc
最新发布
08-07
中层管理者的必备素质.doc
ACCESS数据库开发：遍历控件简化数据传递
"使用遍历控件或数据表字段的方法实现数据传递，通过ACCESS数据库开发中的控件遍历技术，简化主、子窗体及窗体与数据表字段之间的数据交换，减少冗余代码，提高代码可读性和准确性。" 在数据库应用开发中，特别是在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值