【问题标题】:jquery checkbox propertiesjquery复选框属性
【发布时间】:2011-04-14 12:40:38
【问题描述】:

在下面的代码中,如何获取仅选中的复选框并使用 jquery 从列表中将其删除并在 div 中填充已删除的 html

     <div id="section_val">
     <input type="checkbox" name="a_d" value="1">a_d</input>
     <input type="checkbox" name="a_d" value="2">a_d1</input>
     <input type="checkbox" name="a_d" value="3">a_d2</input>
     <input type="checkbox" name="a_d" value="4">a_d3</input>
     </div>

     <div id="populate"></div>

   <input type="button" value="Select" onclick="get_Selected();"/>
   <input type="button" value="Retain" onclick="=retain;"/>

   <script>
   function get_Selected()
   {

   }

    function retain()
    {

     }
    </script>

【问题讨论】:

    标签: jquery jquery-ui jquery-selectors jquery-validate


    【解决方案1】:
    <input type="checkbox" name="a_d" value="1" /><label>a_d</label>
    <input type="checkbox" name="a_d" value="2" /><label>a_d1</label>
    <input type="checkbox" name="a_d" value="3" /><label>a_d2</label>
    <input type="checkbox" name="a_d" value="4" /><label>a_d3</label>
    
    <div id="populate"></div>
    
    <input type="button" value="Select" id="getSelected"/>
    
    <script>
    $(function() {
        $('#getSelected').click(function() {
            $('[name="a_d"]:checked').each(function(){
                $(this).next().andSelf().appendTo('#populate');
            });
        });
    });​
    </script>
    

    demo

    【讨论】:

    • 这些复选框是在包装器 div 还是其他包装器中?
    • @Reigel :是的,这些复选框在 div 中。请参阅 div 问题中的编辑
    【解决方案2】:
    function get_Selected()
       {
    
         //collect select
         var _selectedCheckBoxes=jQuery('input[type=checkbox]').filter(':checked');
    
         // fill dom
         var _text="";  
        _selectedCheckBoxes.each(function(){
          _text+='<br>'+jQuery(this).value();
        });
        jQuery('#populate').html(_text)
    
        // clear check boxes
        _selectedCheckBoxes.remove()
    
       }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-04-05
      • 2011-04-06
      • 1970-01-01
      • 1970-01-01
      • 2012-05-26
      • 2010-12-31
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多