Вопрос по Jqery или работа с атрибутами элементов

alex_next

Захожу иногда
137
2 / 0

Вопрос по Jqery или работа с атрибутами элементов

« : 07.07.2015, 15:46:14 »

Доброго времени суток форумчане! Есть одна задача с которой никак не могу разобраться. Есть n-ое количество chekbox - ов к каждому из которых прописан свой уникальный атрибут data-id , когда юзер кликает по chekbox-ам необходимо брать эти значения data-id и помещать в значения атрибута value отдельных скрытых инпутов. Проблема такая у меня. Первое почитал документацию и даже на ее основе не смог вытащить (при помощи метода attr) все необходимые значения data-id , так как отмеченных chekbox-ов может быть много а метод вытаскивает только самый первый. И второе - даже если и найдется выход из проблемы с attr не понимаю как вложить все полученные значения в value....я не прошу готового решения, я прошу подтолкнуть к выходу...посоветовать что то....заранее благодарен (если говори о совсем нубярских вещах не судите строго я только стал изучать jquery)

Записан

passer

Завсегдатай
1013
75 / 3

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #1 : 07.07.2015, 16:05:43 »

Сделайте в цикле. Перебор чекбоксов, внутри извлечение data-id помещение в value.

Записан

Aleks.Denezh

Живу я здесь
3401
428 / 4

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #2 : 07.07.2015, 16:26:28 »

из data-id вытягивается значение через $('element').data('id')

Записан

Мой блог по разработке на Joomla CMS!

Skype: aleks.denezh

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #3 : 08.07.2015, 07:38:20 »

Спасибо за советы, буду пробовать...

Записан

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #4 : 08.07.2015, 08:13:10 »

Опять запутался ..приведу пример кода

Код

<form action="#" id="map_form">
                       <label><input data-id="1" class="check1" type="checkbox" value="ЦАО метро №1"> ЦАО метро №1</label>
                        <label><input data-id="2" class="check1" type="checkbox" value="ЦАО метро №2"> ЦАО метро №2</label>
                        <label><input data-id="3" class="check1" type="checkbox"> ЦАО метро №3</label>
                        <label><input data-id="4" class="check1" type="checkbox"> ЦАО метро №4</label>
                        <label><input data-id="5" class="check1" type="checkbox"> ЦАО метро №5</label>
                        <label><input data-id="6" class="check2" type="checkbox"> ЗАО метро №1</label>
</form>

нужно при клике на кнопку или еще что получить значения data-id всех отмеченных чекбоксов и подставить значение каждого в отдельный для каждого атрибут value тега inpet type="hidden" что бы в дальнейшем работать через PHP с этими самыми value...все что я из себя выдавил это вот это

Код

('#hiddenInputs').val($('#map_form input[type="checkbox"]').attr('data-id'););

как это дело поправить а я уверен что в нем есть ошибки и дописать, что бы работало? не пойму как сунуть в цикл

« Последнее редактирование: 08.07.2015, 08:54:04 от alex_next »

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #5 : 08.07.2015, 08:57:17 »

http://joomlaforum.ru/index.php/topic,309445.0.html
Задавал аналогичный вопрос, ответ по ссылке, сделайте себе по аналогии

Записан

Личка | Вкусняшки

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #6 : 08.07.2015, 09:13:59 »

вот что я родил дополнительно но опять же не знаю сработает ли оно

Код

    $('button').click(function() {
        $('#map_form input').each(function() {
            if ($(this).is(':checked')) {
            var checkedID = $(this).attr('data-id');
            $('#someHidden').val($checkedID);
            
        });
    });

Поправьте пожалуйста так что бы функция работала + объясните как класть скажем атрибут data-id из первого инпута в атрибут value специально созданного инпута и по той же схеме брать в цикле data-id второго инпута в атрибут value специально созданного дополнительного инпута...просто по сути юзер может кликнуть на несколько чекбоксов и мне их надо получить все в виде value каждый отдельно что бы обработать в PHP...я не знаю может я ошибаюсь и есть другой метод...но ничего абсолютно не получается, хотя я чувствую что ваши советы верны, но мои дела с js jq пока на столько плохи что не могу никак ничего сделать

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #7 : 08.07.2015, 09:15:10 »

var checkedID = $(this).data('id');

Записан

Личка | Вкусняшки

AlekVolsk

Гуру
6913
416 / 4

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #8 : 08.07.2015, 09:21:08 »

Почитайте про массивы js, формируйте массив из значений отмеченных чекбоксов и закодируйте массив в json-строку, которую аяксом вы передать дальше на обработку. В получившем строку контроллере уже на пыхе снова декодируйте из json в массив и делайте с ним все что необходимо.
Более подробно не подскажу, сам в js не оч.

Записан

Личка | Вкусняшки

Arkadiy

Гуру
5317
463 / 2
Крепитесь, други.

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #9 : 08.07.2015, 09:34:08 »

1. Создайте простую форму с вашими чекбоксами.
2. В скрипте сериализуйте форму в переменную

Код

var form = $('#ofrmId').serialize();

3. Передайте ее методом $.ajax в свойстве data.
4. Ловите в php как обычные переменные массива $_REQUEST (пост, гет).

Записан

А так ли проста Joomla? | Мои расширения для Joomla и Joostina

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #10 : 08.07.2015, 10:24:41 »

Цитата: Arkadiy от 08.07.2015, 09:34:08

1. Создайте простую форму с вашими чекбоксами.
2. В скрипте сериализуйте форму в переменную
Код
var form = $('#ofrmId').serialize();
3. Передайте ее методом $.ajax в свойстве data.
4. Ловите в php как обычные переменные массива $_REQUEST (пост, гет).

Могли бы вы привести пример рабочей функции по вашему методу?
или можно ли как то используя метод .map() сделать мною задуманное? как нибудь вот так

Код

   var classes = $("input:checked").map(function(indx, element){
  return $(element).attr("data-id");

будет ли это работать?

Записан

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #11 : 08.07.2015, 10:51:21 »

в общем приведу полный пример того что мне надобно...может кто то все таки поможет, так как у меня ничего не выходит
HTML

Код

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>--</title>
    <link rel='stylesheet' href='css/style.css'>
</head>
<body>
    <div class="main">
        <div id="test">
            <p><tt id="results"></tt></p>
        </div>
        <div id="tabs-container">
            <ul class="tabs-menu">
                <li class="current"><a href="#tab-1">Метро с районами</a></li>
                <li><a href="#tab-2">По алфавиту</a></li>
                <li><a href="#tab-3">По карте</a></li>
            </ul>
            <div class="tab">
                <div id="tab-1" class="tab-content">
                    <div class="accordion ">
                        <div class="accordion-toggle"><input class="globalCheckCao" data-id="globalCheckCao" type="checkbox"> <label class="check_button"> ЦАО</label></div>
                            <div class="accordion-content">
                                <ul>
                                    <li><label><input data-id="1" class="check1" type="checkbox"> ЦАО метро №1</label></li>
                                    <li><label><input data-id="2" class="check1" type="checkbox"> ЦАО метро №2</label></li>
                                    <li><label><input data-id="3" class="check1" type="checkbox"> ЦАО метро №3</label></li>
                                    <li><label><input data-id="4" class="check1" type="checkbox"> ЦАО метро №4</label></li>
                                    <li><label><input data-id="5" class="check1" type="checkbox"> ЦАО метро №5</label></li>
                                </ul>
                            </div>
                        <div class="accordion-toggle"><input class="globalCheckZao" data-id="globalCheckZao" type="checkbox"> <label class="check_button"> ЗАО</label></div>
                            <div class="accordion-content">
                                <ul>
                                    <li><label><input data-id="6" class="check2" type="checkbox"> ЗАО метро №1</label></li>
                                    <li><label><input data-id="7" class="check2" type="checkbox"> ЗАО метро №2</label></li>
                                    <li><label><input data-id="8" class="check2" type="checkbox"> ЗАО метро №3</label></li>
                                    <li><label><input data-id="9" class="check2" type="checkbox"> ЗАО метро №4</label></li>
                                    <li><label><input data-id="10" class="check2" type="checkbox"> ЗАО метро №5</label></li>
                                </ul>
                            </div>
                        <div class="accordion-toggle"><input class="globalCheckVao" data-id="globalCheckVao" type="checkbox"> <label class="check_button"> ВАО</label></div>
                            <div class="accordion-content">
                                <ul>
                                    <li><label><input data-id="11" class="check3" type="checkbox"> ВАО метро №1</label></li>
                                    <li><label><input data-id="12" class="check3" type="checkbox"> ВАО метро №2</label></li>
                                    <li><label><input data-id="13" class="check3" type="checkbox"> ВАО метро №3</label></li>
                                    <li><label><input data-id="14" class="check3" type="checkbox"> ВАО метро №4</label></li>
                                    <li><label><input data-id="15" class="check3" type="checkbox"> ВАО метро №5</label></li>
                                </ul>
                            </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-content">
                    <ul>
                        <li><label><input data-id="1" class="check1" type="checkbox" value="ЦАО метро №1"> ЦАО метро №1</label></li>
                        <li><label><input data-id="2" class="check1" type="checkbox" value="ЦАО метро №2"> ЦАО метро №2</label></li>
                        <li><label><input data-id="3" class="check1" type="checkbox"> ЦАО метро №3</label></li>
                        <li><label><input data-id="4" class="check1" type="checkbox"> ЦАО метро №4</label></li>
                        <li><label><input data-id="5" class="check1" type="checkbox"> ЦАО метро №5</label></li>
                        <li><label><input data-id="6" class="check2" type="checkbox"> ЗАО метро №1</label></li>
                        <li><label><input data-id="7" class="check2" type="checkbox"> ЗАО метро №2</label></li>
                        <li><label><input data-id="8" class="check2" type="checkbox"> ЗАО метро №3</label></li>
                        <li><label><input data-id="9" class="check2" type="checkbox"> ЗАО метро №4</label></li>
                        <li><label><input data-id="10" class="check2" type="checkbox"> ЗАО метро №5</label></li>
                        <li><label><input data-id="11" class="check3" type="checkbox"> ВАО метро №1</label></li>
                        <li><label><input data-id="12" class="check3" type="checkbox"> ВАО метро №2</label></li>
                        <li><label><input data-id="13" class="check3" type="checkbox"> ВАО метро №3</label></li>
                        <li><label><input data-id="14" class="check3" type="checkbox"> ВАО метро №4</label></li>
                        <li><label><input data-id="15" class="check3" type="checkbox"> ВАО метро №5</label></li>
                    </ul>
                </div>
                <div id="tab-3" class="tab-content">
                    <div class="filtre_form">
                        <form>
                            <div class="map_filtre">
                                <img class="metro_map" src="images/metro_full.png">

                                <div data-container="metro" class="metro-container">
                                    <div class="metro-title">
                                        <div class="metro-description"></div>
                                    </div>
                                    <div class="metro-line1">
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 102px;">
                                            <input data-id="1" class="check1" type="checkbox"> ЦАО метро №1
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 141px;">
                                            <input data-id="2" class="check1" type="checkbox"> ЦАО метро №2
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 169px;">
                                            <input data-id="3" class="check1" type="checkbox"> ЦАО метро №3
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 197px;">
                                            <input data-id="4" class="check1" type="checkbox"> ЦАО метро №4
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 227px;">
                                            <input data-id="5" class="check1" type="checkbox"> ЦАО метро №5
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 227px;">
                                            <input data-id="6" class="check1" type="checkbox"> ЦАО метро №6
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="cloned_block">
                <form id="map_form">

                    <fieldset>
                        <legend>Выбранные элементы</legend>
                        <p></p>
                        
                        <div class="align_right"><button class="button button-blue " type="submit" click= >Отправить</button></div>



                    </fieldset>

                </form>

            </div>
        </div>
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/_main.js"></script>
</body>
</html>

JQUERY

Код

$(document).ready(function () {
$test = [];
	$(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
	$('.accordion').find('.check_button').click(function(){
		$(this).parent().next().slideToggle();
    });
    $('.globalCheckCao').click(function() {
        $('.check1').prop('checked', $(this).prop('checked'));
        $('.check1').parent().toggleClass('active');
    });
    $('.globalCheckZao').click(function() {
        $('.check2').prop('checked', $(this).prop('checked'));
        $('.check2').parent().toggleClass('active');
    });
    $('.globalCheckVao').click(function() {
        $('.check3').prop('checked', $(this).prop('checked'));
        $('.check3').parent().toggleClass('active');
    });

    $("#tabs-container input").on('change', function() {
    	var dataId = $(this).attr('data-id');
    	var checkStatus;
    	if ($(this).is(':checked')){
    		checkStatus = 1;
    	} else {
    		checkStatus = 0
    	};

		$('input').each(function() {
    		if ($(this).attr('data-id') == dataId) {
    			if (checkStatus == 1) {
	    			$(this).attr('checked', true);
                    $(this).parent().addClass('active');
	    		} else {
	    			$(this).attr('checked', false);
                    $(this).parent().removeClass('active');
	    		}
    		}
    	});
    });
    $("#tabs-container input").change(function() {
        if ($(this).is(':checked')) {
            var checkedID = $(this).attr('data-id');
            $(this).parent().clone().appendTo('#map_form fieldset');

            
        };
    });

    $('#map_form input').each(function(event) {
        if (!$(this).is(':checked')) {
            $(this).remove();
        }
    });

CSS

Код


* {
    margin: 0;
    padding: 0;
}
body {
    background: #ccc none repeat scroll 0 0;
    height: 100%;
    width: 100%;
}
.main {
    margin: 50px auto 0;
    width: 1000px;
}
ul {
    list-style: outside none none;
}
.metro_map {
    height: 961px;
    width: 900px;
}
.metro-container {
    background: rgba(240, 240, 240, 0.5) none repeat scroll 0 0;
    height: 961px;
    margin-bottom: -966px;
    overflow: hidden;
    position: relative;
    top: -966px;
    width: 900px;
}
.metro-title {
    font-size: 2em;
    margin: 10px 0 20px;
    text-align: center;
}
.metro-description {
    font-size: 0.4em;
    opacity: 0.5;
}
.metro-lines {
    background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
    padding: 10px 0;
}
.metro-label {
    cursor: pointer;
    font-family: "Arial",sans-serif;
    font-size: 10px;
    max-width: 80px;
    overflow: hidden;
    padding: 0 0 0 15px;
}
.metro-label input[type="checkbox"] {
    left: -50px;
    position: absolute;
    top: -50px;
}
.metro-label.metro-line {
    display: inline-block;
    left: 9px;
    margin: 0 10px 0 0;
    position: absolute;
    top: 94px;
}
.metro-label.metro-station {
    position: absolute;
}
.metro-label::before {
    content: "";
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 1px;
    width: 10px;
}
.metro-label.active::before {
    opacity: 1;
}
.metro-label.metro-line::before {
    height: 6px;
    margin: -1px 0 0;
}
.metro-label.metro-station::before {
    border-radius: 100%;
    height: 10px;
    margin: 0;
}
.metro-line1.metro-label::before, .metro-line1 .metro-label::before {
    background: #0cff00 none repeat scroll 0 0;
}


.accordion-toggle {
	color: red;
	font-size: 18px;
}

.accordion-content {
	font-size: 16px;
	color: #000;
	padding-left: 30px;
}

.check_button {
	cursor: pointer;
}

.clear:after,
.tabs-menu:after {
    clear: both;
    content: "";
    display: table;
    font-size: 0;
    height: 0;
    line-height: 0;
}

#tabs-container {
    padding: 20px 0 0 0;
}

ul.tabs-menu {
    font-size: 0;
    line-height: 0;
    margin: 0 0;
}

ul.tabs-menu li {
    float: left;
    height: 38px;
    line-height: 36px;
    white-space: nowrap;
    width: auto;
    margin: 0;
    display: block;
    text-align: center;
    border-top: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-bottom: 1px solid #d4d4d1;
}
ul.tabs-menu li:first-child {
}

ul.tabs-menu li+li {
    border-right: 1px solid #d4d4d1;
    border-left: 0 none;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
}

.tabs-menu li a {
    font-size: 14px;
    line-height: 38px;
    color: #2c3e50;
    text-decoration: none;
    padding: 0 7px;
}

.tabs-menu .current a {
    color: #27ae60;
    padding: 0 17px;
}

.tabs-menu .current a:focus {
    outline: 0 none;
}

.tab {
    border-top: 1px solid #d4d4d1;
    background-color: #fff;
    margin-bottom: 20px;
    width: auto;
    margin-top: -1px;
    width: 100%;
}

.tab-content {
    padding: 20px;
    display: none;
    font-size: 14px;
    line-height: 20px;
    color: #7f8c8d;
    width: 100%;
}

#tab-1 {
    display: block;
}

.cloned_block {
    width: 100%;
    margin-top: 30px;
    background: #fff;
    box-sizing: border-box;
    padding: 10px 20px;
}

.cloned_block fieldset {
    padding: 10px;
}

.align_right {
    text-align: right;
}

.#map_form {
    position: relative;
}

#map_form input {
    position: relative;
    left: 0;
    top: 0;
}

#map_form label {
    position: relative;
    left: 0!important;
    top: 0!important;
}

В итоге как я и говорил мне нужно как то передать и в PHP обработать все выбранные checkbox что бы фильтровать данные на сайте...в целом это все фильтр

Записан

Arkadiy

Гуру
5317
463 / 2
Крепитесь, други.

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #12 : 08.07.2015, 10:55:24 »

А для чего вам другие элементы создавать? Лучше полностью задачу опишите.

Записан

А так ли проста Joomla? | Мои расширения для Joomla и Joostina

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #13 : 08.07.2015, 11:08:46 »

Цитата: Arkadiy от 08.07.2015, 10:55:24

А для чего вам другие элементы создавать? Лучше полностью задачу опишите.

Тут у меня получается три вкладки в каждой из которых разный вариант выбора одного и того же, то есть в первой вкладке мы выбираем станцию метро по району, во второй вкладке по алфавиту а в третьей вообще на карте метро...так вот, пол функции я уже написал...отписал функцию что бы выбранная станция была выбрана во всех вкладках...а после у меня задача взять выбранные пользователем станции как то отправить в PHP обработчик что бы в дальнейшем после обработки отфильтровать по станциям метро выбранным контент, не могу понять как мне выбранные чекбоксы отправить в PHP...ничего не получается ...хочется сделать так что бы jq вытягивал значения data-id атрибутов у всех выбранных чекбоксов и пихал их в атрибут value какого нибудь hidden инпута...а дальше просто отправлять уже в PHP...но нифига не получается потому что я с js и jq только недавно познакомился и еще не знаю как выделывать подобные штуки....оч прошу помочь...хоть как то, так как все советы от пользователей отписавшихся здесь воплотить в жизнь не получается....пытался сделать в цикле, но нифига так же не вышло...у меня получается вытащит значение только самого первого data-id а все остальные что выбрал пользователь не выходит...не знаю уже что делать голова кипит

Записан

robert

Живу я здесь
4974
457 / 20

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #14 : 08.07.2015, 11:21:44 »

По-моему, вы что-то перемудрили. Зачем создавать новые input'ы, чтобы запихать туда id других input'ов? Почему не отправлять сразу value существующих input' ов(у них сейчас как раз нет value)?

Записан

Не будь паразитом, сделай что-нибудь самостоятельно!

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #15 : 08.07.2015, 11:42:39 »

Цитата: robert от 08.07.2015, 11:21:44

По-моему, вы что-то перемудрили. Зачем создавать новые input'ы, чтобы запихать туда id других input'ов? Почему не отправлять сразу value существующих input' ов(у них сейчас как раз нет value)?

напишите ваш вариант в виде скрипта пожалуйста...очень прошу, моя оленья голова уже совсем не способна думать...что бы не попробовал все не получается

Записан

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #16 : 08.07.2015, 14:32:18 »

Я в целом сделал мелкий шажок к тому что мне было нужно правда все равно есть еще одна загвоздка...я смог написать функцию которая создает при клике по чекбоксу отдельный input type="hidden" и сует ему в атрибут value значение которые я выдергиваю из атрибута data-id соответствующего чекбокса, правда загвоздка вот в чем, если я нажимаю на еще один чекбокс инпут создается и ему так же задается value но почему то и value первого нажатого чекбокса так же меняется на то значение которое я получаю от второго...привожу пример функции...прошу помощи...что надо сделать что бы при нажатии на каждый новый чекбокс в создаваемые в следствии этого инпуты подсовывалось нужное уникальное значение....приведу опять в пример свой код что бы вы могли протестировать его
HTML

Код

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>--</title>
    <link rel='stylesheet' href='css/style.css'>
</head>
<body>
    <div class="main">
        <div id="test">
            <input type="hidden" id="someHidden" value="0">
        </div>
        <div id="tabs-container">
            <ul class="tabs-menu">
                <li class="current"><a href="#tab-1">Метро с районами</a></li>
                <li><a href="#tab-2">По алфавиту</a></li>
                <li><a href="#tab-3">По карте</a></li>
            </ul>
            <div class="tab">
                <div id="tab-1" class="tab-content">
                    <div class="accordion ">
                        <div class="accordion-toggle"><input class="globalCheckCao" data-id="globalCheckCao" type="checkbox"> <label class="check_button"> ЦАО</label></div>
                            <div class="accordion-content">
                                <ul>
                                    <li><label><input data-id="1" class="check1" type="checkbox" name="surname" value="22"> ЦАО метро №1</label></li>
                                    <li><label><input data-id="2" class="check1" type="checkbox"> ЦАО метро №2</label></li>
                                    <li><label><input data-id="3" class="check1" type="checkbox"> ЦАО метро №3</label></li>
                                    <li><label><input data-id="4" class="check1" type="checkbox"> ЦАО метро №4</label></li>
                                    <li><label><input data-id="5" class="check1" type="checkbox"> ЦАО метро №5</label></li>
                                </ul>
                            </div>
                        <div class="accordion-toggle"><input class="globalCheckZao" data-id="globalCheckZao" type="checkbox"> <label class="check_button"> ЗАО</label></div>
                            <div class="accordion-content">
                                <ul>
                                    <li><label><input data-id="6" class="check2" type="checkbox"> ЗАО метро №1</label></li>
                                    <li><label><input data-id="7" class="check2" type="checkbox"> ЗАО метро №2</label></li>
                                    <li><label><input data-id="8" class="check2" type="checkbox"> ЗАО метро №3</label></li>
                                    <li><label><input data-id="9" class="check2" type="checkbox"> ЗАО метро №4</label></li>
                                    <li><label><input data-id="10" class="check2" type="checkbox"> ЗАО метро №5</label></li>
                                </ul>
                            </div>
                        <div class="accordion-toggle"><input class="globalCheckVao" data-id="globalCheckVao" type="checkbox"> <label class="check_button"> ВАО</label></div>
                            <div class="accordion-content">
                                <ul>
                                    <li><label><input data-id="11" class="check3" type="checkbox"> ВАО метро №1</label></li>
                                    <li><label><input data-id="12" class="check3" type="checkbox"> ВАО метро №2</label></li>
                                    <li><label><input data-id="13" class="check3" type="checkbox"> ВАО метро №3</label></li>
                                    <li><label><input data-id="14" class="check3" type="checkbox"> ВАО метро №4</label></li>
                                    <li><label><input data-id="15" class="check3" type="checkbox"> ВАО метро №5</label></li>
                                </ul>
                            </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-content">
                    <ul>
                        <li><label><input data-id="1" class="check1" type="checkbox" value="ЦАО метро №1"> ЦАО метро №1</label></li>
                        <li><label><input data-id="2" class="check1" type="checkbox" value="ЦАО метро №2"> ЦАО метро №2</label></li>
                        <li><label><input data-id="3" class="check1" type="checkbox"> ЦАО метро №3</label></li>
                        <li><label><input data-id="4" class="check1" type="checkbox"> ЦАО метро №4</label></li>
                        <li><label><input data-id="5" class="check1" type="checkbox"> ЦАО метро №5</label></li>
                        <li><label><input data-id="6" class="check2" type="checkbox"> ЗАО метро №1</label></li>
                        <li><label><input data-id="7" class="check2" type="checkbox"> ЗАО метро №2</label></li>
                        <li><label><input data-id="8" class="check2" type="checkbox"> ЗАО метро №3</label></li>
                        <li><label><input data-id="9" class="check2" type="checkbox"> ЗАО метро №4</label></li>
                        <li><label><input data-id="10" class="check2" type="checkbox"> ЗАО метро №5</label></li>
                        <li><label><input data-id="11" class="check3" type="checkbox"> ВАО метро №1</label></li>
                        <li><label><input data-id="12" class="check3" type="checkbox"> ВАО метро №2</label></li>
                        <li><label><input data-id="13" class="check3" type="checkbox"> ВАО метро №3</label></li>
                        <li><label><input data-id="14" class="check3" type="checkbox"> ВАО метро №4</label></li>
                        <li><label><input data-id="15" class="check3" type="checkbox"> ВАО метро №5</label></li>
                    </ul>
                </div>
                <div id="tab-3" class="tab-content">
                    <div class="filtre_form">
                        <form>
                            <div class="map_filtre">
                                <img class="metro_map" src="images/metro_full.png">

                                <div data-container="metro" class="metro-container">
                                    <div class="metro-title">
                                        <div class="metro-description"></div>
                                    </div>
                                    <div class="metro-line1">
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 102px;">
                                            <input data-id="1" class="check1" type="checkbox"> ЦАО метро №1
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 141px;">
                                            <input data-id="2" class="check1" type="checkbox"> ЦАО метро №2
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 169px;">
                                            <input data-id="3" class="check1" type="checkbox"> ЦАО метро №3
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 197px;">
                                            <input data-id="4" class="check1" type="checkbox"> ЦАО метро №4
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 227px;">
                                            <input data-id="5" class="check1" type="checkbox"> ЦАО метро №5
                                        </label>
                                        <label data-type="station" class="metro-label metro-station" style="left: 9px; top: 227px;">
                                            <input data-id="6" class="check1" type="checkbox"> ЦАО метро №6
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="cloned_block">
                <form id="map_form">

                    <fieldset>
                        <legend>Выбранные элементы</legend>
                        <p></p>
                        
                        <div class="align_right"><button class="button button-blue " type="submit" >Отправить</button></div>
                        <div class="align_right"><button class="button button-blue " type="resset" >сброс</button></div>



                    </fieldset>

                </form>

            </div>
        </div>
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/_main.js"></script>
</body>
</html>

JQUERY

Код

$(document).ready(function () {
$test = [];
	$(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
	$('.accordion').find('.check_button').click(function(){
		$(this).parent().next().slideToggle();
    });
    $('.globalCheckCao').click(function() {
        $('.check1').prop('checked', $(this).prop('checked'));
        $('.check1').parent().toggleClass('active');
    });
    $('.globalCheckZao').click(function() {
        $('.check2').prop('checked', $(this).prop('checked'));
        $('.check2').parent().toggleClass('active');
    });
    $('.globalCheckVao').click(function() {
        $('.check3').prop('checked', $(this).prop('checked'));
        $('.check3').parent().toggleClass('active');
    });

    $("#tabs-container input").on('change', function() {
    	var dataId = $(this).attr('data-id');
    	var checkStatus;
    	if ($(this).is(':checked')){
    		checkStatus = 1;
    	} else {
    		checkStatus = 0
    	};

		$('input').each(function() {
    		if ($(this).attr('data-id') == dataId) {
    			if (checkStatus == 1) {
	    			$(this).attr('checked', true);
                    $(this).parent().addClass('active');
	    		} else {
	    			$(this).attr('checked', false);
                    $(this).parent().removeClass('active');
	    		}
    		}
    	});
    });
/*вот ниже нужная функция и с ней как раз описанная выше проблема*/
    $("#tabs-container input").change(function() {
        if ($(this).is(':checked')) {
            var test = checkedID;
            var checkedID = [];
            checkedID.push($(this).data('id'));
            var test = checkedID;
            $('#map_form').append('<input type="hidden">');
            $('#map_form input').addClass('test' + checkedID);
            $('.test' + checkedID).val(checkedID);
            
            
            console.log(checkedID);

            
        };
    });

    $('#map_form input').each(function(event) {
        if (!$(this).is(':checked')) {
            $(this).remove();
        }
    });





});

CSS

Код

* {
    margin: 0;
    padding: 0;
}
body {
    background: #ccc none repeat scroll 0 0;
    height: 100%;
    width: 100%;
}
.main {
    margin: 50px auto 0;
    width: 1000px;
}
ul {
    list-style: outside none none;
}
.metro_map {
    height: 961px;
    width: 900px;
}
.metro-container {
    background: rgba(240, 240, 240, 0.5) none repeat scroll 0 0;
    height: 961px;
    margin-bottom: -966px;
    overflow: hidden;
    position: relative;
    top: -966px;
    width: 900px;
}
.metro-title {
    font-size: 2em;
    margin: 10px 0 20px;
    text-align: center;
}
.metro-description {
    font-size: 0.4em;
    opacity: 0.5;
}
.metro-lines {
    background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
    padding: 10px 0;
}
.metro-label {
    cursor: pointer;
    font-family: "Arial",sans-serif;
    font-size: 10px;
    max-width: 80px;
    overflow: hidden;
    padding: 0 0 0 15px;
}
.metro-label input[type="checkbox"] {
    left: -50px;
    position: absolute;
    top: -50px;
}
.metro-label.metro-line {
    display: inline-block;
    left: 9px;
    margin: 0 10px 0 0;
    position: absolute;
    top: 94px;
}
.metro-label.metro-station {
    position: absolute;
}
.metro-label::before {
    content: "";
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 1px;
    width: 10px;
}
.metro-label.active::before {
    opacity: 1;
}
.metro-label.metro-line::before {
    height: 6px;
    margin: -1px 0 0;
}
.metro-label.metro-station::before {
    border-radius: 100%;
    height: 10px;
    margin: 0;
}
.metro-line1.metro-label::before, .metro-line1 .metro-label::before {
    background: #0cff00 none repeat scroll 0 0;
}


.accordion-toggle {
	color: red;
	font-size: 18px;
}

.accordion-content {
	font-size: 16px;
	color: #000;
	padding-left: 30px;
}

.check_button {
	cursor: pointer;
}

.clear:after,
.tabs-menu:after {
    clear: both;
    content: "";
    display: table;
    font-size: 0;
    height: 0;
    line-height: 0;
}

#tabs-container {
    padding: 20px 0 0 0;
}

ul.tabs-menu {
    font-size: 0;
    line-height: 0;
    margin: 0 0;
}

ul.tabs-menu li {
    float: left;
    height: 38px;
    line-height: 36px;
    white-space: nowrap;
    width: auto;
    margin: 0;
    display: block;
    text-align: center;
    border-top: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-bottom: 1px solid #d4d4d1;
}
ul.tabs-menu li:first-child {
}

ul.tabs-menu li+li {
    border-right: 1px solid #d4d4d1;
    border-left: 0 none;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
}

.tabs-menu li a {
    font-size: 14px;
    line-height: 38px;
    color: #2c3e50;
    text-decoration: none;
    padding: 0 7px;
}

.tabs-menu .current a {
    color: #27ae60;
    padding: 0 17px;
}

.tabs-menu .current a:focus {
    outline: 0 none;
}

.tab {
    border-top: 1px solid #d4d4d1;
    background-color: #fff;
    margin-bottom: 20px;
    width: auto;
    margin-top: -1px;
    width: 100%;
}

.tab-content {
    padding: 20px;
    display: none;
    font-size: 14px;
    line-height: 20px;
    color: #7f8c8d;
    width: 100%;
}

#tab-1 {
    display: block;
}

.cloned_block {
    width: 100%;
    margin-top: 30px;
    background: #fff;
    box-sizing: border-box;
    padding: 10px 20px;
}

.cloned_block fieldset {
    padding: 10px;
}

.align_right {
    text-align: right;
}

.#map_form {
    position: relative;
}

#map_form input {
    position: relative;
    left: 0;
    top: 0;
}

#map_form label {
    position: relative;
    left: 0!important;
    top: 0!important;
}

Записан

passer

Завсегдатай
1013
75 / 3

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #17 : 08.07.2015, 14:48:38 »

Цитата: alex_next от 07.07.2015, 15:46:14

....я не прошу готового решения, я прошу подтолкнуть к выходу...посоветовать что то....

Вам не кажется, что вопрос из "помогите мне" незаметно перетек в "сделайте мне".

Записан

robert

Живу я здесь
4974
457 / 20

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #18 : 08.07.2015, 15:34:22 »

Что вам мешает отправить форму с не пустыми checkbox'ами, если они все равно никуда больше не отправляются?

Код: html4strict

<form>
<input data-id="2" class="check1" type="checkbox" value="2"/>
...
</form>

Записан

Не будь паразитом, сделай что-нибудь самостоятельно!

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #19 : 08.07.2015, 15:41:22 »

Цитата: passer от 08.07.2015, 14:48:38

Вам не кажется, что вопрос из "помогите мне" незаметно перетек в "сделайте мне".

почему же? я понимаю что прошу немного больше чем изначально, но ведь я не прошу сделать за меня, я прошу показать где у меня ошибки и описать способы их решения....хотя все же вы правы...я сильно перегибаю, но иного выхода пока не вижу...либо ваша посильная помощь либо скорее всего я никак и не доберусь до финала этого скрипта...

Записан

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #20 : 08.07.2015, 15:44:21 »

Цитата: robert от 08.07.2015, 15:34:22

Что вам мешает отправить форму с не пустыми checkbox'ами, если они все равно никуда больше не отправляются?
Код: html4strict
<form>
<input data-id="2" class="check1" type="checkbox" value="2"/>
...
</form>

Я тоже думал проставить value изначально, но начальство требует именно добавления новых инпутов в момент нажатия кнопки и присвоения этим инпутам в значение атрибута value тех значений что я получу из data-id
По сути - поправьте меня если я неправ...если проставить value изначально, то выбранные чекбоксы будут отправляться при нажатии кнопки в PHP без лишних проблем на обработку

« Последнее редактирование: 13.07.2015, 10:48:37 от alex_next »

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #21 : 08.07.2015, 16:03:43 »

бред какой-то...

Записан

Личка | Вкусняшки

robert

Живу я здесь
4974
457 / 20

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #22 : 08.07.2015, 16:04:39 »

Цитата: alex_next от 08.07.2015, 15:44:21

По сути - поправьте меня если я неправ...если проставить value изначально, то выбранные чекбоксы будут отправляться при нажатии кнопки в PHP без лишних проблем на обработку

Ну конечно, какие могут быт проблемы? Вы же пытались делать то же самое, только вместо самих checkbox'ов - другие input'ы.

Записан

Не будь паразитом, сделай что-нибудь самостоятельно!

Arkadiy

Гуру
5317
463 / 2
Крепитесь, други.

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #23 : 08.07.2015, 19:35:10 »

Цитата: alex_next от 08.07.2015, 15:44:21

Я тоже думал проставить value изначально, но начальство требует именно с геморойной фигней типа добавления новых инпутов в момент нажатия кнопки и присвоения этим инпутам в значение атрибута value тех значений что я получу из data-id
По сути - поправьте меня если я неправ...если проставить value изначально, то выбранные чекбоксы будут отправляться при нажатии кнопки в PHP без лишних проблем на обработку

Начальство, как я думаю, еще меньше понимает в предмете разговора. Вернитесь к моему варианту, сериализуйте форму и передайте ее аяксом в php.

Записан

А так ли проста Joomla? | Мои расширения для Joomla и Joostina

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #24 : 08.07.2015, 22:47:09 »

Всем в любом случае спасибо за помощь..многое на самом деле почерпнул из ваших советов, но похоже что реального выхода кроме как уговаривать заказчика на изначальное проставление value тут и нет вовсе

Наверное тему можно закрывать, так как чувствую что порядком поднадоел вам со своим вопросом

Записан

Arkadiy

Гуру
5317
463 / 2
Крепитесь, други.

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #25 : 09.07.2015, 08:16:18 »

Ну вы спросите как обычно в таких случаях - вам шашечки или ехать?

Записан

А так ли проста Joomla? | Мои расширения для Joomla и Joostina

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #26 : 12.07.2015, 10:01:25 »

Народ, как говорится "Дело сделано" Вот код скрипта который при клике помещает все значения data-id выбранных checkbox в массив + создает соответствующее количество input type="hidden" каждому из которых при помощи цикла по вышеупомянутому массиву присваивает значение data-id в значение value ...аж сам запутался, но думаю смысл ухватите из кода

Код

$('#testdiv').click(function(){
    var checked = [];
    $('#tab-1 input:checkbox:checked').map(function(){
        checked.unshift($(this).data('id'));
        $('#map_form').append('<input type="hidden" />');
        

    });
    
    for(var i = 0; i<checked.length; i++){
        $('#map_form input').eq(i).val(checked[i]);
    }
});

Сейчас такой вопрос...как сделать так, что бы, если галочка была снята в последствии, скажем с некоторых, ранее выбранных чекбоксов соответствующий input type="hidden" и соответствующий элемент массива удалялся за ненадобностью?

« Последнее редактирование: 13.07.2015, 10:49:55 от alex_next »

Записан

Arkadiy

Гуру
5317
463 / 2
Крепитесь, други.

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #27 : 12.07.2015, 12:56:39 »

Если вы действительно делаете <input type="hidden" /> то почти никак, инпут должен иметь отличие от других и вы должны знать какое это отличие.

Записан

А так ли проста Joomla? | Мои расширения для Joomla и Joostina

alex_next

Захожу иногда
137
2 / 0

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #28 : 12.07.2015, 16:24:54 »

Цитата: Arkadiy от 12.07.2015, 12:56:39

Если вы действительно делаете <input type="hidden" /> то почти никак, инпут должен иметь отличие от других и вы должны знать какое это отличие.

Я правильно понимаю, что нужно прописать всем <input type="hidden" /> уникальный id? И если да, то натолкните на мысль что делать дальше, а я уже покапаю документацию в указанном направлении

Записан

Arkadiy

Гуру
5317
463 / 2
Крепитесь, други.

Re: Вопрос по Jqery или работа с атрибутами элементов

« Ответ #29 : 12.07.2015, 19:31:58 »

Можно любой уникальный атрибут, но ID гораздо оптимальнее с точки зрения скорости выборки.

Код: javascript

$('#testdiv').click(function(){
    var checked = [];
    $('#tab-1 input:checkbox').map(function(){
        if($(this).prop("checked")){
              var id = $(this).data('id');
              var input = $('#input_'+id);
              checked.unshift(id);
              if(input.length == 0){
                   $('#map_form').append('<input type="hidden" id="input_'+id+'" value="'+id+'"/>');
              }
        }else if($('#input_'+id).length != 0){
             input.remove();
        }
    });
});

Записан

А так ли проста Joomla? | Мои расширения для Joomla и Joostina

Работа с Google Drive через WebDAV -- как? Автор Филипп Сорокин	Ответов: 0 Просмотров: 949	08.12.2018, 16:55:03 от Филипп Сорокин
Форматирование текста. Вопрос связан с MySQL Автор Аня	Ответов: 6 Просмотров: 1291	06.05.2018, 00:35:31 от Аня
Пишу свой модуль - работа с fields Автор Absalem	Ответов: 3 Просмотров: 1284	25.08.2016, 12:55:50 от olejenya
[Решено] jQuery и работа над элементами в iframe Автор ELLE	Ответов: 10 Просмотров: 18209	22.06.2016, 14:32:52 от warlocksp
Вопрос по PHP Автор zeher	Ответов: 6 Просмотров: 1165	26.09.2015, 19:18:34 от zeher

Онлайн-трансляции Joomla-разработки Игоря Бердичевского

20 лет Joomla: Ринат Кажетов.В 2025 году Joomla исполнилось 20 лет

20 лет Joomla: Ринат Кажетов

Похожие темы