Форум

dasha862 · #1 (**permalink**) 21.09.2017, 13:38

Здравствуйте.

Представленный скрипт при нажатии на checkbox передаёт значение label в 

Подскажите, пожалуйста, как сделать:
- что бы при обновлении страницы(checkbox по-прежнему выбран) переданное значение в не слетало.
- Что бы выбранные checkbox не заменяли друг друга(как сейчас,чередуются), а вставали рядом.
Например: Материал (Велюр Кожа), и после клика checkbox на невыбран, Кожа - из удалялся.

<div class="bl-check">

<div class="dropdown-toggle">Материал <span class="selected"></span></div>

<div><input id="f_6710f_67" name="f_67[0]" value="0" type="checkbox">
<label for="f_6710f_67">Велюр</label></div>

<div><input id="f_6711f_67" name="f_67[1]" value="1" type="checkbox">
<label for="f_6711f_67">Кожа</label></div>

<div><input id="f_6712f_67" name="f_67[2]" value="2" type="checkbox">
<label for="f_6712f_67">Ткань</label></div>

</div>

$("input[type=checkbox]").on("click", function(){
  var $this = $(this);
  var my_id = $this.attr("id");
  var my_label = $("label[for="+ my_id + "]" );
  var dropDownToggleValue = $this.parents(".bl-check").find(".dropdown-toggle .selected");
dropDownToggleValue.text("(" + my_label.text() + ")");
  });

j0hnik · #2 (**permalink**) 21.09.2017, 14:15

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	</style>
</head>
<body>
<div class="bl-check">
<div class="dropdown-toggle">Материал <span class="selected"></span></div>
<div><input id="f_6710f_67" name="f_67[0]" value="0" type="checkbox">
<label for="f_6710f_67">Велюр</label></div>
<div><input id="f_6711f_67" name="f_67[1]" value="1" type="checkbox">
<label for="f_6711f_67">Кожа</label></div>
<div><input id="f_6712f_67" name="f_67[2]" value="2" type="checkbox">
<label for="f_6712f_67">Ткань</label></div>
</div>

<div class="bl-check">
<div class="dropdown-toggle">Цвет <span class="selected"></span></div>
<div><input id="f_6410f_64" name="f_64[0]" value="0" type="checkbox">
<label class="field_label" for="f_6410f_64">Белый</label></div>
<div><input id="f_6411f_64" name="f_64[1]" value="1" type="checkbox">
<label class="field_label" for="f_6411f_64">Красный</label></div>
<div><input id="f_6412f_64" name="f_64[2]" value="2" type="checkbox">
<label class="field_label" for="f_6412f_64">Черный</label></div>
</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
<script>

	$(".bl-check").on("click", function(){
		var text = '( ';
		$(this).find("input[type=checkbox]:checked").each(function(){
			text += $(this).siblings('label').text()+' ';
		});
		text += ')';
		if (text =='( )') text ='';
		$(this).find('.selected').text(text);
	});

	</script>
	</html>

dasha862 · #3 (**permalink**) 21.09.2017, 14:51

Такой вариант у меня не работает, наверно, из-за количества блоков, он не один:

<div class="bl-check">
<div class="dropdown-toggle">Материал <span class="selected"></span></div>
<div><input id="f_6710f_67" name="f_67[0]" value="0" type="checkbox">
<label for="f_6710f_67">Велюр</label></div>
<div><input id="f_6711f_67" name="f_67[1]" value="1" type="checkbox">
<label for="f_6711f_67">Кожа</label></div>
<div><input id="f_6712f_67" name="f_67[2]" value="2" type="checkbox">
<label for="f_6712f_67">Ткань</label></div>
</div>

<div class="bl-check">
<div class="dropdown-toggle">Цвет <span class="selected"></span></div>
<div><input id="f_6410f_64" name="f_64[0]" value="0" type="checkbox">
<label class="field_label" for="f_6410f_64">Белый</label></div>
<div><input id="f_6411f_64" name="f_64[1]" value="1" type="checkbox">
<label class="field_label" for="f_6411f_64">Красный</label></div>
<div><input id="f_6412f_64" name="f_64[2]" value="2" type="checkbox">
<label class="field_label" for="f_6412f_64">Черный</label></div>
</div>

j0hnik · #4 (**permalink**) 21.09.2017, 15:14

Поправил пост

dasha862 · #5 (**permalink**) 21.09.2017, 16:13

j0hnik, большое СПАСИБО!

рони · #6 (**permalink**) 21.09.2017, 17:55

ещё вариант ...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  </style>
</head>
<body>
<div class="bl-check">
<div class="dropdown-toggle">Материал <span class="selected"></span></div>
<div><input id="f_6710f_67" name="f_67[0]" value="0" type="checkbox">
<label for="f_6710f_67">Велюр</label></div>
<div><input id="f_6711f_67" name="f_67[1]" value="1" type="checkbox">
<label for="f_6711f_67">Кожа</label></div>
<div><input id="f_6712f_67" name="f_67[2]" value="2" type="checkbox">
<label for="f_6712f_67">Ткань</label></div>
</div>

<div class="bl-check">
<div class="dropdown-toggle">Цвет <span class="selected"></span></div>
<div><input id="f_6410f_64" name="f_64[0]" value="0" type="checkbox">
<label class="field_label" for="f_6410f_64">Белый</label></div>
<div><input id="f_6411f_64" name="f_64[1]" value="1" type="checkbox">
<label class="field_label" for="f_6411f_64">Красный</label></div>
<div><input id="f_6412f_64" name="f_64[2]" value="2" type="checkbox">
<label class="field_label" for="f_6412f_64">Черный</label></div>
</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
<script>

  $(".bl-check").on("click", function(){
    var text = $.map($("input[type=checkbox]:checked + label",this),function(el){
      return el.textContent
    });
    if (text.length) text = "( "+text.join(" ")+" )";
    $(".selected",this).text(text);
  });

  </script>
  </html>

dasha862 · #7 (**permalink**) 21.09.2017, 18:09

Когда пользователь отмечает checkbox и нажимает найти, он перенаправляется на страницу поиска, на ней checkbox(ы) выбраны, но значения в не передаются, они появляются после того, как я кликаю по блоку bl-check.
Это не принципиально, но очень хочется, что бы выглядело красиво.

dasha862 · #8 (**permalink**) 21.09.2017, 19:39

Ещё раз Спасибо.

j0hnik · #9 (**permalink**) 21.09.2017, 23:47

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

Когда пользователь отмечает checkbox и нажимает найти, он перенаправляется на страницу поиска, на ней checkbox(ы) выбраны, но значения в не передаются, они появляются после того, как я кликаю по блоку bl-check.
Это не принципиально, но очень хочется, что бы выглядело красиво.

вставьте после функции

$(".bl-check").click();

Форум

Справочник

Discord чат

Курсы javascript