Форум

olegalimov · #1 (**permalink**) 12.06.2017, 11:21

Доброе время суток.
Подскажите как правильно сделать универсальное условие по выбору чекбоксов?
Есть вот такой код.

.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

olegalimov,
бред какой-то ... html сделайте

olegalimov · #3 (**permalink**) 12.06.2017, 12:23

Сообщение от рони

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

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>

olegalimov · #5 (**permalink**) 12.06.2017, 16:24

Большое спасибо за решение, но работает с задержкой под 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

Сообщение от olegalimov

Мне показали вот это

а мне нет

Сообщение от olegalimov

или это не возможно.

возможно, но нужен html и css

рони · #7 (**permalink**) 12.06.2017, 16:32

Сообщение от olegalimov

и как сделать только одну кнопку на выбрать и снять чекбосы,

сделать можно, но кнопка будет очень плохой для клиента

olegalimov · #8 (**permalink**) 12.06.2017, 16:53

Сообщение от рони

а мне нет

возможно, но нужен html и css

вот здесь ваш код под wordpress

рони · #9 (**permalink**) 12.06.2017, 17:20

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")
    })
});

olegalimov · #10 (**permalink**) 13.06.2017, 09:31

Сообщение от рони

olegalimov,
попробуйте так

Большое спасибо за ответ. Работает на Ура!!!!!!!!!!

Форум

Справочник

Discord чат

Курсы javascript