jQuery简化函数几个复选框

我有几个复选框，我想简化下一个函数。jQuery简化函数几个复选框

我不想每次重复相同的代码。我想使用数据属性。

<input id="homeView" class="home-checkbox" type="checkbox" /> 
<input id="homeAll" class="home-checkbox" type="checkbox" /> 



$('#homeAll').on('click',function() 
     { 
      if(this.checked) 
      { 
       $('.home-checkbox').each 
       (
        function() 
        { 
         this.checked = true; 
        } 
       ); 
      } 
      else 
      { 
       $('.home-checkbox').each 
       (
        function() 
        { 
         this.checked = false; 
        } 
       ); 
      } 
     });

https://jsfiddle.net/ywg9nhp4/2/

感谢

来源

2015-10-20 dani9293

能帮你更具体的你正在尝试做什么？与'下一个功能'有什么关系？ – DinoMyte

你应该在你的小提琴的“Frameworks＆Extensions”下选择一个jQuery版本。如果你不这样做，那么这些功能都不起作用。 – wrxsti

这个有用吗？ https://jsfiddle.net/ywg9nhp4/3/ –

试试这个。我使用了一种添加名为'data-attr'的属性的方法。有了这个，你所要做的就是添加data-attr ='classname'，它可以用于所有的复选框。

<input id="homeView" class="home-checkbox" data-attr="home-checkbox" type="checkbox" />homeView 

<input id="homeAll" class="home-checkbox all" type="checkbox" />homeAll 


<input id="pagesView" class="pages-checkbox" data-attr="pages-checkbox" type="checkbox" />pagesView 

<input id="pagesAll" class="pages-checkbox all" type="checkbox" />pagesAll 

$('.all').on('click',function() 
    { 
     var $this = $(this); 
     var isChecked = this.checked; 
     $('input').each(function() 
      { 
       if($this.hasClass($(this).attr("data-attr"))) 
       if(isChecked) 
       $(this).prop("checked",true); 
      else 
       $(this).prop("checked",false); 
      }); 

    });

https://jsfiddle.net/ywg9nhp4/5/

更新：允许所有元素，如果未选中取消选中。

$('input:checkbox').on('click',function() 
    { 
     var $this = $(this); 
     var isChecked = this.checked; 
     var $thisClass = $(this).attr("class"); 
      $('input').each(function() 
      { 
       if($this.hasClass($(this).attr("data-attr"))) 
       { 
        if(isChecked) 
        $(this).prop("checked",true); 
       else    
        $(this).prop("checked",false);  
      } 
      else if($(this).hasClass($thisClass) && !isChecked) 
      {     
       if(isChecked) 
        $(this).prop("checked",true); 
        else    
        $(this).prop("checked",false); 
        } 

      }); 

    });

https://jsfiddle.net/ywg9nhp4/8/

来源

2015-10-20 17:37:49 DinoMyte

我想要取消选中复选框，复选框“全部”没有选中。 – dani9293

更新小提琴和代码来做到这一点。 – DinoMyte

简化版本：

$('#homeAll').on('click',function() { 
    if(this.checked) 
     $('.home-checkbox').prop("checked", true); 
    else 
     $('.home-checkbox').prop("checked", false); 
});

DEMO：https://jsfiddle.net/ywg9nhp4/3/

来源

2015-10-20 17:25:43

您的代码只会以id =“＃homeAll”为目标复选框，这意味着对于另一组复选框，您需要为另一个id添加相同的逻辑。 – DinoMyte

@DinoMyte是的，在这个答案后编辑问题 –

这是一个简单的！看：

$('#homeAll').on('click', function() { 
 
    $('.home-checkbox').prop("checked", this.checked); 
 
}); 
 

 
$('#pagesAll').on('click', function() { 
 
    $('.pages-checkbox').prop("checked", this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="homeView" class="home-checkbox" type="checkbox" /> One Home 
 

 
<input id="homeAll" class="home-checkbox" type="checkbox" /> All Home 
 

 
<input id="pagesView" class="pages-checkbox" type="checkbox" /> One pages 
 

 
<input id="pagesAll" class="pages-checkbox" type="checkbox" />All pages

来源

2015-10-20 17:31:15

你必须为每个'＃varAll'复选框重复此代码 – indubitablee

我的消化简单，行代码更少 –

在这个演示

，用于控制其他复选框状态的复选框，只是把类all。此代码不必重复 - 它将类别all中的每个元素都作为目标。

$(document).ready(function() { 
 
    $('.all').on('change', function() { 
 
     var allCheck = $(this); 
 
    \t var classes = $(this).attr('class');  
 
     $('.' + classes.split(' ')[0] + '').each(function() { 
 
      if (allCheck.is(':checked')) { 
 
       $(this).prop('checked', true); 
 
      } 
 
      else { 
 
       $(this).prop('checked', false); 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="homeView" class="home-checkbox" type="checkbox" />           
 
<input id="homeAll" class="home-checkbox all" type="checkbox" /> 
 
<br/> 
 
<input id="pagesView" class="pages-checkbox" type="checkbox" /> 
 
<input id="pagesAll" class="pages-checkbox all" type="checkbox" />

来源

2015-10-20 17:43:19 indubitablee

jQuery简化函数几个复选框

回答

相关问题