Передача значений label в span
Здравствуйте.
Представленный скрипт при нажатии на checkbox передаёт значение label в <span class="selected"></span> Подскажите, пожалуйста, как сделать: - что бы при обновлении страницы(checkbox по-прежнему выбран) переданное значение в <span class="selected"></span> не слетало. - Что бы выбранные checkbox не заменяли друг друга(как сейчас,чередуются), а вставали рядом. Например: Материал (Велюр Кожа), и после клика checkbox на невыбран, Кожа - из <span class="selected"></span> удалялся. <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() + ")");
});
|
<!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>
|
Такой вариант у меня не работает, наверно, из-за количества блоков, он не один:
<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, большое СПАСИБО!
|
:)
ещё вариант ...
<!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>
|
Когда пользователь отмечает checkbox и нажимает найти, он перенаправляется на страницу поиска, на ней checkbox(ы) выбраны, но значения в <span class="selected"></span> не передаются, они появляются после того, как я кликаю по блоку bl-check.
Это не принципиально, но очень хочется, что бы выглядело красиво. |
Ещё раз Спасибо.
|
Цитата:
$(".bl-check").click();
|
| Часовой пояс GMT +3, время: 14:34. |