JavaScript 通过 Ajax 动态加载 CheckBox 复选框
作者:木棉时间:2026-10-22 07:48:08浏览:595
本文介绍如何使用 JavaScript 结合 Ajax 技术动态生成并加载 CheckBox 复选框。通过定义容器并发送异步请求获取数据,将返回的年份数组转换为对应的 HTML 标签插入页面,同时包含错误处理机制,适用于需要动态渲染选项的场景。
JavaScript 通过 Ajax 动态加载 CheckBox 复选框
直接提供实现代码,具体代码如下所示:
<pre name="code" class="html">
<div class="controls" id="compareyear">
</div></pre><br>
<img src="http://img.blog.csdn.net/20170830165326131?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFuMTQ1NTQxODE3MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br>
<br>
//动态加载年份checkbox by dongch 20170830 function GetCompareYearByStationName(name) { var str = " <label class='control-label'>选择对比年限:</label>"; $.ajax({ type: "GET", //默认是GET url: '@Url.Action("*********", "*****")', data: "stationName=" + name, async: false, //同步
cache: false, //不加载缓存 success: function (obj) {//后台传来的数据:"2010,2011,2012,2013,2014,2015" var yearArray = new Array(); yearArray = obj.split(","); for (var i = 0; i < yearArray.length; i++) { if (i < yearArray.length - 3) { str += "<label><input type='checkbox'
name='checkbox' value='" + yearArray[i] + "' />" + yearArray[i] + " </label>"; } else {//后三个年份默认选中 str += "<label><input type='checkbox' name='checkbox' value='" + yearArray[i] + "' checked='checked' />" + yearArray[i] + " </label>"; } } $("#compareyear").html(str);
}, error: function () { alert("对比年限加载失败"); } }); }
<pre></pre>
<pre></pre>
总结
以上所述是小编给大家介绍的 JavaScript 通过 Ajax 动态加载 CheckBox 复选框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!
作者最新文章
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object:数组类型检测误区解析
2026-11-04 19:50:47
