Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.06.2017, 11:21
Аспирант
Отправить личное сообщение для olegalimov Посмотреть профиль Найти все сообщения от olegalimov
 
Регистрация: 27.09.2015
Сообщений: 94

Правильно сделать универсальное условие по выбору и снятию чекбоксов?
Доброе время суток.
Подскажите как правильно сделать универсальное условие по выбору чекбоксов?
Есть вот такой код.
.checkboxes_on{display:inline-block;width:100%;height:100%;background:#9acd32;}
.checkboxes{display:inline-block;width:100%;height:100%;padding:0;}
$('[name=checkAll],[name=uncheckAll]').click(function(){
      $tld.prop('checked', [false, true][this.value]);
    $('.checkboxes').addClass('checkboxes_on');

  });
    $('[name=uncheckAll]').click(function(){
    $('.checkboxes').removeClass('checkboxes_on');
    $('.checkboxes').addClass('checkboxes');
  })

  $(".checkboxes").each( function( index, element) {
    var id = $(this).find('input').attr( "id");
    $(this).addClass(id);
    
      $('.ru').click(function(){
        if ($('.checkboxes ru, input').is(':checked')) {
            $(this).addClass('checkboxes_on');
            } else {
          $(this).removeClass('checkboxes_on');
        //	$('.checkboxes').css('backgr1ound','none');
        //	$(this).parent().removeClass('checkboxes');
            }
      });
      $('.rf').click(function(){
        if ($('.checkboxes rf, input').is(':checked')) {
          $(this).addClass('checkboxes_on');
            } else {
          $(this).removeClass('checkboxes_on');
        }
      });
      $('.su').click(function(){
        if ($('.checkboxes su, input').is(':checked')) {
          $(this).addClass('checkboxes_on');
            } else {
          $(this).removeClass('checkboxes_on');
        }
      }); //  и так далее всего 23 чекбоксов

Я не могу решить, если чекбоксы отмечены кнопкой [name=checkAll] , то при снятие чекбокса стиль не изменяется почему-то?
вот скриншот
можно или сделать одну кнопку Выбрать все и снять все, чтоб надписи менялись зависимости от ситуации?
Заранее благодарен за ответы
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2017, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

olegalimov,
бред какой-то ... html сделайте
Ответить с цитированием
  #3 (permalink)  
Старый 12.06.2017, 12:23
Аспирант
Отправить личное сообщение для olegalimov Посмотреть профиль Найти все сообщения от olegalimov
 
Регистрация: 27.09.2015
Сообщений: 94

Сообщение от рони Посмотреть сообщение
olegalimov,
бред какой-то ... html сделайте
<div class="button_table">
								<p><span class="but_fon"><button class="button_2" type="button" name="checkAll" value="1">Выбрать все</button></span><span class="but_fon"><button class="button_2" type="button" name="uncheckAll" value="0">Снять все</button></span><span class="but_fon"><button class="button_2" type="button" onclick="window.open('http://panel.webvm.ru/OFFERTA/offerta_add_select_type.khtml','_blank')">Заказать домен</button></span><span class="but_fon"><button style="display:none" class="button_2" type="button" name="clear_res">Очистить результаты</button></span>

</p>
								</p>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<table class="table-fon">
								<tr class="table_string">
									<div class="table_cell-1">
										<p><span  class="doman_name"><input type="checkbox" name="TLDomain" value="ru" id="ru"/>.
											<span>ru</span></span></p>
										<div><p itemprop="price">100 RUB</p></div>
										<div class="domen_next">Продление 100 RUB<br/></div></div>
									<div class="table_cell-1">
										<p><span class="doman_name"><input type="checkbox" name="TLDomain" value="рф" id="rf"/>.
											<span>рф</span></span></p>
										<div><p itemprop="price">100 RUB</p></div>
										<div class="domen_next">Продление 180 RUB<br/></div></div>
Ответить с цитированием
  #4 (permalink)  
Старый 12.06.2017, 13:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

olegalimov,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

.checkboxes_on{background:#9acd32;}
.doman_name{
  cursor: pointer;border-radius: 5px; padding: 6px 12px;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
$(function() {
    var a = $(".doman_name"),
        c = $("input", a);
    a.on("click", function(a) {
        var b = $("input", this)[0];
        a.target != b && (b.checked = !b.checked);
        $(this).toggleClass("checkboxes_on", b.checked)
    });
    $('[name="checkAll"],[name="uncheckAll"]').on("click", function() {
        c.prop({checked: !+this.value}).click()
    })
});
  </script>
</head>

<body>
<div class="button_table">
                <p><span class="but_fon"><button class="button_2" type="button" name="checkAll" value="1">Выбрать все</button></span><span class="but_fon"><button class="button_2" type="button" name="uncheckAll" value="0">Снять все</button></span><span class="but_fon"><button class="button_2" type="button" onclick="window.open('http://panel.webvm.ru/OFFERTA/offerta_add_select_type.khtml','_blank')">Заказать домен</button></span><span class="but_fon"><button style="display:none" class="button_2" type="button" name="clear_res">Очистить результаты</button></span>

</p>
                </p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <table class="table-fon">
                <tr class="table_string">
                  <div class="table_cell-1">
                    <p><span  class="doman_name"><input type="checkbox" name="TLDomain" value="ru" id="ru"/>.
                      <span>ru</span></span></p>
                    <div><p itemprop="price">100 RUB</p></div>
                    <div class="domen_next">Продление 100 RUB<br/></div></div>
                  <div class="table_cell-1">
                    <p><span class="doman_name"><input type="checkbox" name="TLDomain" value="рф" id="rf"/>.
                      <span>рф</span></span></p>
                    <div><p itemprop="price">100 RUB</p></div>
                    <div class="domen_next">Продление 180 RUB<br/></div></div>


</body>
</html>

Последний раз редактировалось рони, 12.06.2017 в 13:25.
Ответить с цитированием
  #5 (permalink)  
Старый 12.06.2017, 16:24
Аспирант
Отправить личное сообщение для olegalimov Посмотреть профиль Найти все сообщения от olegalimov
 
Регистрация: 27.09.2015
Сообщений: 94

Большое спасибо за решение, но работает с задержкой под wordpress
Мне показали вот это
$('.table_cell-1').on('change', ':checkbox', function(){
	$(this).closest('label').toggleClass('active', this.checked)
	})

	$('[name="checkAll"]').on('click', function(){
		 var state = this.checked
		$('.table_cell-1 label').each(function(){
		$(this).toggleClass('active', state)
		.find(':checkbox').prop('checked', state)
	  })
	})

но при клике на кнопку Выбрать все стили срабатывают а чекбоксы не отмечет почему-то?
и как сделать только одну кнопку на выбрать и снять чекбосы, и чтоб надпись менялась Выбрать на снять? или это не возможно.
Ответить с цитированием
  #6 (permalink)  
Старый 12.06.2017, 16:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

Сообщение от olegalimov
Мне показали вот это
а мне нет
Сообщение от olegalimov
или это не возможно.
возможно, но нужен html и css
Ответить с цитированием
  #7 (permalink)  
Старый 12.06.2017, 16:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

Сообщение от olegalimov
и как сделать только одну кнопку на выбрать и снять чекбосы,
сделать можно, но кнопка будет очень плохой для клиента
Ответить с цитированием
  #8 (permalink)  
Старый 12.06.2017, 16:53
Аспирант
Отправить личное сообщение для olegalimov Посмотреть профиль Найти все сообщения от olegalimov
 
Регистрация: 27.09.2015
Сообщений: 94

Сообщение от рони Посмотреть сообщение
а мне нет


возможно, но нужен html и css
вот здесь ваш код под wordpress
Ответить с цитированием
  #9 (permalink)  
Старый 12.06.2017, 17:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

olegalimov,
попробуйте так
$(function() {
    var a = $(".checkboxes"),
        c = $("input", a);
    a.on("click", function(a) {
        var b = $("input", this)[0];
        $(this).toggleClass("checkboxes_on", b.checked)
    });
    $('[name="checkAll"],[name="uncheckAll"]').on("click", function() {
        c.prop({checked: +this.value}).parents("label")[["removeClass","addClass"][+this.value]]("checkboxes_on")
    })
});
Ответить с цитированием
  #10 (permalink)  
Старый 13.06.2017, 09:31
Аспирант
Отправить личное сообщение для olegalimov Посмотреть профиль Найти все сообщения от olegalimov
 
Регистрация: 27.09.2015
Сообщений: 94

Сообщение от рони Посмотреть сообщение
olegalimov,
попробуйте так
Большое спасибо за ответ. Работает на Ура!!!!!!!!!!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно составить условие определяющее расширение файлов djadrenaline Общие вопросы Javascript 5 21.07.2012 22:34
Не правильно работает прокрутка, подскажите как сделать правильно? denfer12 Общие вопросы Javascript 0 08.05.2012 23:34
Как правильно задать условие:? dididima Общие вопросы Javascript 1 03.08.2011 00:11
try и catch подскажите как правильно сделать Jekel Javascript под браузер 9 31.03.2010 09:33
Ajax и три <form> не работает. Как правильно сделать листание записей из базы данных? vlad275 AJAX и COMET 2 14.12.2009 13:04