Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   uniform отключение-включение (https://javascript.ru/forum/jquery/39813-uniform-otklyuchenie-vklyuchenie.html)

posta 13.07.2013 03:52

uniform отключение-включение
 
Подскажите, как программно включить - выключить uniform checkbox'ы.
Например - есть 3 чекбокса. нажатие на кнопку 1 - включает все чекбоксы, на вторую - отключает.


<button id="reg-selectall">Выделить все</button>
<button id="reg-deselectall">Снять все</button>

<label><input checked type="checkbox" name="one">1</label>
<label><input checked type="checkbox" name="two">2</label>
<label><input checked type="checkbox" name="three">3</label>


// метод - не работает
$('#reg-selectall').on("click", function(){
	$("label .checker span input").attr('checked',true);
	
	// если включить следующую функцию, то все будет работать, но при одиночном щелчке на один из чекбоксов - работать не будет.
	//$("label .checker span").addClass('checked');

	$.uniform.update();
});

// метод - работает
$('#reg-deselectall').on("click", function(){
	$("label .checker span input").removeAttr('checked');
	$.uniform.update();
});

Deff 13.07.2013 07:47

posta, проставьте нужным группам один класс - включайте/отключайте по классу,
Или обернуть
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<div class=checkToggle>
<button id="reg-selectall">Выделить все</button>

<label><input checked type="checkbox" name="one">1</label>
<label><input checked type="checkbox" name="two">2</label>
<label><input checked type="checkbox" name="three">3</label>

<button id="reg-deselectall">Снять все</button>
</div>

<script type="text/javascript">
$('#reg-selectall').on("click", function(){
  $('.checkToggle input').attr('checked',true)
});
$('#reg-deselectall').on("click", function(){
  $('.checkToggle input').attr('checked',false)
});

</script>

рони 13.07.2013 09:33

posta, для checked лучше prop
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
  <script>
$(document).ready(function(){
$('#reg-selectall').on("click", function(){
$("label input").prop('checked',true);
})
$('#reg-deselectall').on("click", function(){
$("label input").prop('checked',false);
})
  });
  </script>

</head>

<body>
<button id="reg-selectall">Выделить все</button>
<button id="reg-deselectall">Снять все</button>

<label><input checked type="checkbox" name="one">1</label>
<label><input checked type="checkbox" name="two">2</label>
<label><input checked type="checkbox" name="three">3</label>

</body>
</html>

posta 13.07.2013 15:05

Deff, рони - спасибо, но я искал решение для uniform плагина. Как отключить/включить с его помощью? На простых чекбоксах - и так все понятно.

рони 13.07.2013 15:19

Цитата:

Сообщение от posta
я искал решение для uniform плагина

...а давать ссылку на плагин? нафига он же стоит на всех страницах, его же все знают.

Deff 13.07.2013 15:24

posta,
в данных обоих Вариантах - чем не метод

function setcheck (set) {
  if(set){$('#reg-selectall').click();
 } else $('#reg-deselectall').click();
}
setcheck(true);
setcheck(false);

posta 13.07.2013 15:29

рони, черт, а ведь ты прав, забыл. вот - http://uniformjs.com/.
Все перерыл - не нашел ответа. везде решения, примерно как у вас выше.

Deff, извини, но это не то, мне именно по плагину нужна помощь, а не нативные чекбоксы.

рони 13.07.2013 16:01

posta,
решение в лоб - наверняка есть api - читайте доки
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://uniformjs.com/stylesheets/uniform.aristo.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://uniformjs.com/javascripts/jquery.uniform.min.js"></script>
  <script>
$(document).ready(function(){
$(":checkbox").uniform();
$('#reg-selectall').on("click", function(){
$.uniform.restore(":checkbox");
$(":checkbox").prop('checked',true);
$(":checkbox").uniform();
})
$('#reg-deselectall').on("click", function(){
$.uniform.restore(":checkbox");
$(":checkbox").prop('checked',false);
$(":checkbox").uniform();
})
  });
  </script>

</head>

<body>
<button id="reg-selectall">Выделить все</button>
<button id="reg-deselectall">Снять все</button>

<label><input checked type="checkbox" name="one">1</label>
<label><input checked type="checkbox" name="two">2</label>
<label><input checked type="checkbox" name="three">3</label>

</body>
</html>

рони 13.07.2013 16:23

posta,
:write: вота )))
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://uniformjs.com/stylesheets/uniform.aristo.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://uniformjs.com/javascripts/jquery.uniform.min.js"></script>
  <script>
  $(document).ready(function()
    {
      $(":checkbox").uniform();
      var b = $('[id ^="reg"]');
      b.on("click", function()
        {
          var i = b.index($(this))
          $(":checkbox").prop('checked', !i);
          $.uniform.update(":checkbox");
        }
      )
    }
  );
  </script>

</head>

<body>
<button id="reg-selectall">Выделить все</button>
<button id="reg-deselectall">Снять все</button>

<label><input checked type="checkbox" name="one">1</label>
<label><input checked type="checkbox" name="two">2</label>
<label><input checked type="checkbox" name="three">3</label>

</body>
</html>

posta 13.07.2013 16:39

рони, ты - красавчик! немного подправил код - и все ок. на основе твоего последнего. спасибо, что помог разобраться!


Часовой пояс GMT +3, время: 23:37.