jQuery按钮选择div中的所有复选框，然后选择页面上的所有按钮 [英] Jquery button selecting all checkboxed within a div and button selecting all on page

问题描述

您好，我确实可以在此方面提供一些帮助，因为我无法通过按钮来选择.voltSiteResultContainer中的所有复选框以供使用

Hi i could really do with some help on this as I cannot get the button to select all checkboxes within .voltSiteResultContainer to work

HTML示例:

 <div class="pageContainer">
<input type="button" class="check" value="check all"> // want this button to check all on page
<div class="voltSiteResultContainer">
    <div class="checkWrap">
        <input type="button" class="checkSite" value="check all"> // want this button to check all within .voltSiteResultContainer
    </div>
    <input name="checkFile" type="checkbox" class="checkFile" value="1514583">
    <input name="checkFile" type="checkbox" class="checkFile" value="1514583">
    <input name="checkFile" type="checkbox" class="checkFile" value="1514583">
</div>
<div class="voltSiteResultContainer">
    <div class="checkWrap">
        <input type="button" class="checkSite" value="check all"> // want this button to check all within .voltSiteResultContainer
    </div>
    <input name="checkFile" type="checkbox" class="checkFile" value="1514583">
    <input name="checkFile" type="checkbox" class="checkFile" value="1514583">
    <input name="checkFile" type="checkbox" class="checkFile" value="1514583">
</div>

当前的jQuery:

 <script type="text/javascript">
            $(document).ready(function(){
        $('.check:button').toggle(function(){
            $('input:checkbox').attr('checked','checked');
            $(this).val('uncheck all')
        },function(){
            $('input:checkbox').removeAttr('checked');
            $(this).val('check all');        
        })
    })
            $(document).ready(function(){
        $('.checkSite:button').toggle(function(){
            .closest('.voltSiteResultContainer').find('input:checkbox').attr('checked','checked');
            $(this).val('uncheck all')
        },function(){
            $('input:checkbox').removeAttr('checked');
            $(this).val('check all');        
        })
    })

因此$('.check:button')可以工作，但是$('.checkSite:button')却不是:(.

So $('.check:button') work but $('.checkSite:button') is not :(.

在此先感谢您为我提供的任何帮助:)

Thank you in advance for any help you can give me :)

推荐答案

jsBin演示

在第11行中添加$(this)-HTML中缺少</div>:

jsBin demo

Add $(this) in line 11 - and a missing </div> in your HTML:

 $(document).ready(function(){

        $('.check:button').toggle(function(){
            $('input:checkbox').attr('checked','checked');
            $(this).val('uncheck all');
        },function(){
            $('input:checkbox').removeAttr('checked');
            $(this).val('check all');        
        });

        $('.checkSite:button').toggle(function(){
            $(this).closest('.voltSiteResultContainer').find('input:checkbox').attr('checked','checked'); // HERE!!
            $(this).val('uncheck all');
        },function(){
            $(this).closest('.voltSiteResultContainer').find('input:checkbox').removeAttr('checked');
            $(this).val('check all');        
        });

});

固定的HTML标记:

<div class="pageContainer">
    <input type="button" class="check" value="check all" /> // want this button to check all on page
    <div class="voltSiteResultContainer">
      <div class="checkWrap">
         <input type="button" class="checkSite" value="check all" /> // want this button to check all within .voltSiteResultContainer
      </div>
      <input name="checkFile" type="checkbox" class="checkFile" value="1514583" />
      <input name="checkFile" type="checkbox" class="checkFile" value="1514583" />
      <input name="checkFile" type="checkbox" class="checkFile" value="1514583" />
    </div>  
</div>

<div class="voltSiteResultContainer">
    <div class="checkWrap">
      <input type="button" class="checkSite" value="check all" /> // want this button to check all within .voltSiteResultContainer
    </div>
   <input name="checkFile" type="checkbox" class="checkFile" value="1514583" />
   <input name="checkFile" type="checkbox" class="checkFile" value="1514583" />
   <input name="checkFile" type="checkbox" class="checkFile" value="1514583" />
</div>

这篇关于jQuery按钮选择div中的所有复选框，然后选择页面上的所有按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！