当前位置：首页 > 资讯 > 技术文档

jquery中通过过滤器获取表单元素的实现代码

时间：2020-03-25 14:01 编辑：来源：阅读：
扫一扫，手机访问

摘要：jquery中通过过滤器获取表单元素的实现代码

:enable 获取可输入状态的元素 :disabled 获取不可输入状态的元素 :checked 获取选中的表单元素 :seleced 获取下拉框中选中的元素下面看一粒例子 Html

<body>
<form id="form1" runat="server">
<div>
<ul>
<li><label>订单号码：</label><input type="text" disabled="disabled" /></li>
<li><label>订单所有者：</label><input type="text" /></li>
<li>
<input type="checkbox" name="ca" value="红"/>红
<input type="checkbox" name="ca" value="黄"/>黄
<input type="checkbox" name="ca" value="蓝"/>蓝
<input type="checkbox" name="ca" value="绿"/>绿
</li>
<li>
<select multiple="multiple">
<option>选择1</option>
<option>选择2</option>
<option>选择3</option>
<option>选择4</option>
</select>
</li>
</ul>
</div>
</form> <div id="msg">
<p id="cc"></p>
<p id="option"></p> </div>
</body>

JavaScript代码：

[u]复制代码[/u] 代码如下:

<script type="text/javascript">
jQuery(function(){
$("input:text:disabled").val("不能输入");
$("input:text:enabled").val("能输入");
(
function checkboxclick(){
$(":checkbox").unbind("click",checkboxclick);
var vv='';
$(":checkbox:checked").each(function(){
vv+=$(this).val()+",";
});
$("#cc").html("选择的数据："+vv);
$(":checkbox").click(checkboxclick);
}
)()
$("select").change(function(){
var tt='';
$("select option:selected").each(function(){
tt+=$(this).text()+",";
});
$("#option").html("选择的项目是："+tt);
}).trigger("change");
});
</script>

这里面有几点需要注意的是： 1 前面说到bind用来绑定事件，那么这里的unbind就是取消事件的 2 trigger() 方法触发被选元素的指定事件类型。 3 在jQuery(function(){里添加函数的时候，外面要加上括号，后面要加上小括号，如下 jQuery(function(){ ( function check() { })() }) 4 实现层中复选框选中并赋给其他元素值 html

[u]复制代码[/u] 代码如下:

<form id="form1" runat="server">
<div>
<input type="button" id="btn1" value="弹出" />
<input type="checkbox" name="ca" value="红"/>红
<input type="checkbox" name="ca" value="黄"/>黄
<input type="checkbox" name="ca" value="蓝"/>蓝
<input type="checkbox" name="ca" value="绿"/>绿
<input type="checkbox" name="ca" value="白"/>白
<input type="checkbox" name="ca" value="黑"/>黑
</div>
<div id="cc"></div>
</form>

javascript

[u]复制代码[/u] 代码如下:

jQuery(function(){
(
function checkboxclick(){
$(":checkbox").unbind("click",checkboxclick);
var vv='';
$(":checkbox:checked").each(function(){
vv+=$(this).val()+",";
})
$("#cc").html("选择的数据："+vv);
$(":checkbox").click(checkboxclick);
})()
})

效果图如下这种： [img]http://files.jb51.net/upload/201107/20110705232044600.gif[/img]

全部评论(0)

上一篇：jquery获取对象的方法足以应付常见的各种类型的对象
下一篇：jQuery页面弹出框实现文件上传

资讯排行榜
更多>>