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

White_S

White_S

Постоялец
Регистрация
27 Май 2009
Сообщения
482
Реакции
102
Код: 
<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 />
- в данном случае чекнут первый чекбокс.
 
попробуйте использовать jquery, только вам инпуты нужно будет переименовать немного типа id='service1_value', чтоб айди отличались от чекбоксов, а дальше на загрузку документа что-то типа
Код: 
$( "input[type='checkbox']" ).change(function()
{
      var chk = $( this );
      if (chk.prop('checked')) $('#' + chk.attr('id') + 'value').val(chk.val());
});
 
Шумадан написал(а):
попробуйте использовать jquery, только вам инпуты нужно будет переименовать немного типа id='service1_value', чтоб айди отличались от чекбоксов, а дальше на загрузку документа что-то типа
Код: 
$( "input[type='checkbox']" ).change(function()
{
      var chk = $( this );
      if (chk.prop('checked')) $('#' + chk.attr('id') + 'value').val(chk.val());
});
Нажмите для раскрытия...
Извините, я вообще слаб 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 />
но что-то не фурычит. Подскажите что не так?
 
вот рабочий код полностью, исправил ошибки
Код: 
<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>
 
А для чего в примере инпут с id='service1_value' ?
 
FUTURiTY написал(а):
А для чего в примере инпут с id='service1_value' ?
Нажмите для раскрытия...
тоесть? каждый чекбокс и инпут идут в связке, чтоб скрипт знал какое значение куда писать и используются названия с общими serviceN превифксами
 
Простите за наглость, а как сделать очистку поля если я снимаю чекбокс?
 
тогда вместо кода
Код: 
if (chk.prop('checked')) $('#' + chk.attr('id') + '_value').val(chk.val());
напишите
Код: 
$('#' + chk.attr('id') + '_value').val(chk.prop('checked') ? chk.val() : '');
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху