通过过滤器获取表单元素

    通过过滤器可以获取特定的表单元素，如非输入项目或者单选按钮的已选项目等元素，可用的

    :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

  

View Code
<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

 

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

上面这种写法是闭包，自己调用自己，递归调用，为了让每次点击之后，不在执行，所以要取消绑定

 $(":checkbox").unbind("click",checkboxclick); 

上面的这种写法类似于下面的写法

 

View Code
  <script type="text/javascript">
      function checkboxclick(){
           var vv='';
           $(":checkbox:checked").each(function(){
             vv+=$(this).val()+",";
           });
           $("#cc").html("选择的数据："+vv);
         }
       jQuery(function(){
     
         $(":checkbox").click(checkboxclick);

        })
    </script>

定义好一个方法，然后调用即可

效果图如下这种：

 

posted @ 2011-06-30 17:45  双魂人生  阅读(592)  评论(0)  编辑  收藏  举报