Question

我有几个复选框，我想简化下一个功能。

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

<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/

由于

Answer 1

简化版：

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

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

Answer 2

这很简单！看：

$('#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

Answer 3

试试这个。我使用了添加名为＆＃39; data-attr＆＃39;的属性的方法。有了这个，你所要做的就是添加data-attr =＆＃39; classname＆＃39;它适用于所有复选框。

<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/

更新：允许取消选中所有if元素未选中的内容。

$('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/

Answer 4

在本演示中，对于控制其他复选框状态的复选框，只需输入类all即可。此代码不必重复 - 它使用类all定位每个元素。

$(document).ready(function() {
    $('.all').on('change', function() {
        var allCheck = $(this);
    	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" />

jQuery简化了几个复选框的功能

4 个答案: