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

时间：2021-04-10 08:52:24|栏目：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代码：

复制代码代码如下:

 
<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

复制代码代码如下:

 
<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

复制代码代码如下:

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

效果图如下这种：

上一篇：jQuery中:first选择器用法实例

栏目：jquery

下一篇：基于Jquery+Ajax+Json实现分页显示附效果图

本文标题：jquery中通过过滤器获取表单元素的实现代码

本文地址：http://www.codeinn.net/misctech/98385.html

更多jquery

jquery

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

阅读排行

推荐教程