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

时间：2021-05-26

: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);
})()
})

效果图如下这种：

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章