Форум русской поддержки Joomla!® CMS
08.12.2016, 10:01:52 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 922 раз)
0 Пользователей и 1 Гость смотрят эту тему.
alex_next
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



« : 07.07.2015, 16:46:14 »

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

Репутация: +69/-3
Online Online

Пол: Мужской
Сообщений: 829



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

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

Репутация: +372/-4
Offline Offline

Пол: Мужской
Сообщений: 2762



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

из data-id вытягивается значение через $('element').data('id')
Записан
alex_next
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



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

Спасибо за советы, буду пробовать... drink
Записан
alex_next
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



« Ответ #4 : 08.07.2015, 09: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, 09:54:04 от alex_next » Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

http://joomlaforum.ru/index.php/topic,309445.0.html
Задавал аналогичный вопрос, ответ по ссылке, сделайте себе по аналогии
Записан
alex_next
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



« Ответ #6 : 08.07.2015, 10: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
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

var checkedID = $(this).data('id');
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

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

Репутация: +431/-0
Offline Offline

Пол: Мужской
Сообщений: 5315


Крепитесь, други.


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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



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

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
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



« Ответ #11 : 08.07.2015, 11: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
Группа развития
*****

Репутация: +431/-0
Offline Offline

Пол: Мужской
Сообщений: 5315


Крепитесь, други.


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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



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

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

Репутация: +344/-11
Offline Offline

Пол: Мужской
Сообщений: 3591


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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



« Ответ #16 : 08.07.2015, 15: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
Живу я здесь
******

Репутация: +69/-3
Online Online

Пол: Мужской
Сообщений: 829



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

....я не прошу готового решения, я прошу подтолкнуть к выходу...посоветовать что то....
Вам не кажется, что вопрос из "помогите мне" незаметно перетек в "сделайте мне".
Записан
robert
Профи
********

Репутация: +344/-11
Offline Offline

Пол: Мужской
Сообщений: 3591


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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



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

Что вам мешает отправить форму с не пустыми checkbox'ами, если они все равно никуда больше не отправляются?
Код
<form>
<input data-id="2" class="check1" type="checkbox" value="2"/>
...
</form>
 
Я тоже думал проставить value изначально, но начальство требует именно  добавления новых инпутов в момент нажатия кнопки и присвоения этим инпутам в значение атрибута value тех значений что я получу из data-id
По сути - поправьте меня если я неправ...если проставить value изначально, то выбранные чекбоксы будут отправляться при нажатии кнопки в PHP без лишних проблем на обработку
« Последнее редактирование: 13.07.2015, 11:48:37 от alex_next » Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

бред какой-то...
Записан
robert
Профи
********

Репутация: +344/-11
Offline Offline

Пол: Мужской
Сообщений: 3591


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

По сути - поправьте меня если я неправ...если проставить value изначально, то выбранные чекбоксы будут отправляться при нажатии кнопки в PHP без лишних проблем на обработку
Ну конечно, какие могут быт проблемы? Вы же пытались делать то же самое, только вместо самих checkbox'ов - другие input'ы.
Записан
Arkadiy
Группа развития
*****

Репутация: +431/-0
Offline Offline

Пол: Мужской
Сообщений: 5315


Крепитесь, други.


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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



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

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

Репутация: +431/-0
Offline Offline

Пол: Мужской
Сообщений: 5315


Крепитесь, други.


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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



« Ответ #26 : 12.07.2015, 11: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, 11:49:55 от alex_next » Записан
Arkadiy
Группа развития
*****

Репутация: +431/-0
Offline Offline

Пол: Мужской
Сообщений: 5315


Крепитесь, други.


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

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

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 140



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

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

Репутация: +431/-0
Offline Offline

Пол: Мужской
Сообщений: 5315


Крепитесь, други.


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

Можно любой уникальный атрибут, но ID гораздо оптимальнее с точки зрения скорости выборки.
Код
$('#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();
       }
   });
});
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet