jQuery упростить функцию несколько флажков

У меня есть несколько флажков, и я хотел бы упростить следующую функцию.jQuery упростить функцию несколько флажков

Я бы не хотел повторять каждый раз один и тот же код. Я бы хотел использовать атрибут data.

<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

Вы должны выбрать версию 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", что означает, что для другого набора флажков вам нужно будет добавить ту же логику для другого идентификатора. – DinoMyte

@DinoMyte yep, вопрос был отредактирован после этого ответа –

Это просто! Смотри:

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

Мой sugestion прост и меньше строк кода –

в этом примере, для флажков, которые контролируют состояние остальных флажков, просто поместите класс 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 упростить функцию несколько флажков

ответ

Смежные вопросы