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

  • 38 Ответов
  • 1278 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

alex_next

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

*

passer

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

*

Aleks.Denezh

  • *******
  • 2784
  • 376
из data-id вытягивается значение через $('element').data('id')
Мой  блог по разработке на Joomla CMS!
Хотите отблагодарить материально? Мой WMR: R861060179016

*

alex_next

  • ***
  • 139
  • 2
Спасибо за советы, буду пробовать... *DRINK*

*

alex_next

  • ***
  • 139
  • 2
Опять запутался ..приведу пример кода
Код
<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, 10:54:04 от alex_next »

*

AlekVolsk

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

*

alex_next

  • ***
  • 139
  • 2
вот что я родил дополнительно но опять же не знаю сработает ли оно
Код
    $('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

  • ********
  • 6301
  • 336
var checkedID = $(this).data('id');

*

AlekVolsk

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

*

Arkadiy

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

*

alex_next

  • ***
  • 139
  • 2
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

  • ***
  • 139
  • 2
в общем приведу полный пример того что мне надобно...может кто то все таки поможет, так как у меня ничего не выходит
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

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

*

alex_next

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

*

robert

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

*

alex_next

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

*

alex_next

  • ***
  • 139
  • 2
Я в целом сделал мелкий шажок к тому что мне было нужно правда все равно есть еще одна загвоздка...я смог написать функцию которая создает при клике по чекбоксу отдельный 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

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

*

robert

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

*

alex_next

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

*

alex_next

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

*

AlekVolsk

  • ********
  • 6301
  • 336
бред какой-то...

*

robert

  • ********
  • 4002
  • 371
По сути - поправьте меня если я неправ...если проставить value изначально, то выбранные чекбоксы будут отправляться при нажатии кнопки в PHP без лишних проблем на обработку
Ну конечно, какие могут быт проблемы? Вы же пытались делать то же самое, только вместо самих checkbox'ов - другие input'ы.
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

Arkadiy

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

*

alex_next

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

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Ну вы спросите как обычно в таких случаях - вам шашечки или ехать?

*

alex_next

  • ***
  • 139
  • 2
Народ, как говорится "Дело сделано" Вот код скрипта который при клике помещает все значения 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, 12:49:55 от alex_next »

*

Arkadiy

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

*

alex_next

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

*

Arkadiy

  • *****
  • 5342
  • 440
  • Крепитесь, други.
Можно любой уникальный атрибут, но 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();
        }
    });
});