Передать значения выбранных чекбоксов

Тема в разделе "JavaScript", создана пользователем White_S, 7 авг 2014.

Модераторы: ZiX
  1. White_S

    White_S

    Регистр.:
    27 май 2009
    Сообщения:
    474
    Симпатии:
    95
    Код:
    <input type='checkbox' value='Вариант1' id='service1' ><label for='service0'>Вариант1</label> 
    <input id='service1' type="text"><br />
    <input type='checkbox' value='Вариант2' id='service2' ><label for='service1'>Вариант2</label>
    <input id='service2' type="text"><br />
    <input type='checkbox' value='Вариант3' id='service3' ><label for='service2'>Вариант3</label>
    <input id='service3' type="text"><br />
    Помогите пожалуйста. Есть такая структура, надо чтобы при чекнутом чекбоксе value чекбокса передавался в текстовое поле т.е.

    Код:
    <input type='checkbox' value='Вариант1' id='service1' ><label for='service0'>Вариант1</label> 
    <input id='service1' type="text" value='Вариант1'><br />
    <input type='checkbox' value='Вариант2' id='service2' ><label for='service1'>Вариант2</label>
    <input id='service2' type="text"><br />
    <input type='checkbox' value='Вариант3' id='service3' ><label for='service2'>Вариант3</label>
    <input id='service3' type="text"><br />
    - в данном случае чекнут первый чекбокс.
     
    Шумадан нравится это.
  2. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    попробуйте использовать jquery, только вам инпуты нужно будет переименовать немного типа id='service1_value', чтоб айди отличались от чекбоксов, а дальше на загрузку документа что-то типа
    Код:
    $( "input[type='checkbox']" ).change(function()
    {
          var chk = $( this );
          if (chk.prop('checked')) $('#' + chk.attr('id') + 'value').val(chk.val());
    });
     
    Джуга, Ctrogan и White_S нравится это.
  3. White_S

    White_S

    Регистр.:
    27 май 2009
    Сообщения:
    474
    Симпатии:
    95
    Извините, я вообще слаб JS вот как бы сделал так
    Код:
    <script type='text/javascript'>
    $( "input[type='checkbox']" ).change(function()
    {
          var chk = $( this );
          if (chk.prop('checked')) $('#' + chk.attr('id') + 'value').val(chk.val());
    });
    </script>
    
    <input type='checkbox' value='Вариант1' id='service1' ><label for='service0'>Вариант1</label>
    <input id='service1_value' type="text"><br />
    <input type='checkbox' value='Вариант2' id='service2' ><label for='service1'>Вариант2</label>
    <input id='service2_value' type="text"><br />
    <input type='checkbox' value='Вариант3' id='service3' ><label for='service2'>Вариант3</label>
    <input id='service3_value' type="text"><br />
    но что-то не фурычит. Подскажите что не так?
     
  4. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    вот рабочий код полностью, исправил ошибки
    Код:
    <html>
    <head>
    <META http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type='text/javascript'>
    $( document ).ready(function() {
        $( "input[type='checkbox']" ).change(function()
        {
              var chk = $( this );
              if (chk.prop('checked')) $('#' + chk.attr('id') + '_value').val(chk.val());
        });
    });
    </script>
    </head>
    <body>
    <input type='checkbox' value='Вариант1' id='service1' ><label for='service0'>Вариант1</label>
    <input id='service1_value' type="text"><br />
    <input type='checkbox' value='Вариант2' id='service2' ><label for='service1'>Вариант2</label>
    <input id='service2_value' type="text"><br />
    <input type='checkbox' value='Вариант3' id='service3' ><label for='service2'>Вариант3</label>
    <input id='service3_value' type="text"><br />
    </body>
    </html>
     
    Джуга, Ctrogan и White_S нравится это.
  5. FUTURiTY

    FUTURiTY Прохожие

    А для чего в примере инпут с id='service1_value' ?
     
  6. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    тоесть? каждый чекбокс и инпут идут в связке, чтоб скрипт знал какое значение куда писать и используются названия с общими serviceN превифксами
     
    Джуга, Ctrogan и White_S нравится это.
  7. White_S

    White_S

    Регистр.:
    27 май 2009
    Сообщения:
    474
    Симпатии:
    95
    Простите за наглость, а как сделать очистку поля если я снимаю чекбокс?
     
  8. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    тогда вместо кода
    Код:
    if (chk.prop('checked')) $('#' + chk.attr('id') + '_value').val(chk.val());
    напишите
    Код:
    $('#' + chk.attr('id') + '_value').val(chk.prop('checked') ? chk.val() : '');
     
    Джуга и White_S нравится это.