1

Идея в том, что бы по умолчанию уже была выбрана первая кнопка и отображалась в инпуте, а также была visited (но вопрос не в visited). Есть похожие вариации с радио, но тут ситуация немного другая, так как кнопки.

   <div class="form-group people-block">
    <label class="form-people">People</label>
    <form><input readonly type="text" name="people" class="people-input" id="people"></form>

<div class="people-choice">
<div class="people-choice-item">
    <button class="choice-button">1-2 People</button></div>
<div class="people-choice-item">
    <button class="choice-button">3 People</button></div>
<div class="people-choice-item">
    <button class="choice-button">4 People</button></div>



 $(".choice-button").click(function(){
   $("#people").val( $(this).text() );
});

2 ответа 2

0
$(".choice-button").click(function(){
  $("#people").val( $(this).text() );
}).eq(0).click();
0

$('.choice-button').click(that => $('#people').val($(that.target).text())).first().click();
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  margin-top: 5px;
}

button:hover {
  background: #fff;
  border: 1px solid #0084ff;
  color: #0084ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group people-block">
  <label class="form-people">People</label>
  <form>
    <input readonly type="text" name="people" class="people-input" id="people">
  </form>
</div>

<div class="people-choice">
  <div class="people-choice-item">
    <button class="choice-button">1-2 People</button>
  </div>
  <div class="people-choice-item">
    <button class="choice-button">3 People</button>
  </div>
  <div class="people-choice-item">
    <button class="choice-button">4 People</button>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.