脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 过滤器获取表单元素

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

 更新时间：2011年07月05日 23:20:55   作者：  
通过过滤器可以获取特定的表单元素，如非输入项目或者单选按钮的已选项目等元素，可用的
: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中基础过滤选择器用法实例分析

    JQuery中基础过滤选择器用法实例分析

    这篇文章主要介绍了JQuery中基础过滤选择器用法,涉及jQuery属性选择及样式操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 基于Jquery实现万圣节快乐特效

    基于Jquery实现万圣节快乐特效

    本文使用jquery代码实现万圣节特效，代码简单易懂，万圣节送给大家不一样的礼物，参考下本文大家也一起制作吧
    2015-11-11
  • jquery实现走马灯特效实例(扑克牌切换效果）

    jquery实现走马灯特效实例(扑克牌切换效果）

    本文主要介绍了jquery实现走马灯特效实例(扑克牌切换效果），文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • JQuery实现动态漂浮广告

    JQuery实现动态漂浮广告

    这篇文章主要为大家详细介绍了JQuery实现动态漂浮广告，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • JS中Array数组学习的总结

    JS中Array数组学习的总结

    本文主要介绍了JS中Array数组的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • jQuery操作checkbox选择(list/table)

    jQuery操作checkbox选择(list/table)

    本文将介绍下checkbox list选择及checkbox table选中附效果图，感兴趣的朋友可以参考下哈，希望可以帮助到你
    2013-04-04
  • Jquery 全选反选实例代码

    Jquery 全选反选实例代码

    本文给大家介绍基于jquery代码实现的全选全不选反选实例代码，代码简单易懂，非常实用，感兴趣的一起学习吧
    2015-11-11
  • jquery.onoff实现简单的开关按钮功能(推荐)

    jquery.onoff实现简单的开关按钮功能(推荐)

    这篇文章主要介绍了jquery.onoff实现简单的开关按钮功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • jQuery.event兼容各浏览器的event详细解析

    jQuery.event兼容各浏览器的event详细解析

    jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断
    2013-12-12
  • jQuery实现的网页换肤效果示例

    jQuery实现的网页换肤效果示例

    这篇文章主要介绍了jQuery实现的网页换肤效果,结合完整实例形式分析了jQuery通过修改link标签的href属性值实现换肤效果的相关技巧,需要的朋友可以参考下
    2016-09-09

最新评论