Как кастомизировать радиобаттон с помощью лейбла находящегося за пределами формы?

Question

[Антон]

Задача такая, есть некая форма содержащая заполняемые поля пользывателем, в ней 4 скрытых радиобаттона для 4 типов товаров леблы которых находятся вне формы, а точнее каждый лейбл радиобаттона находится под описание товарного предложения.
Необходимо кастомизировать эти лейблы, разрисовать с помощью css это не проблема, а вот заставить их изменить внешний вид после нажатия не удается, что можете посоветовать для решения этой проблемы? (в js я не силен)
html

<label for="ulu" onclick="" class="radiobutton"></label>
                 <label for="demo1" onclick="" class="radiobutton"></label>
                 <label for="demo2" onclick="" class="radiobutton"></label>
                 <label for="demo3" onclick="" class="radiobutton"></label>

                <form role="form">
                <div class="form-group">
                    <input type="radio" name="compane" id="ulu" value="option1">
                    <input type="radio" name="compane" id="demo1" value="option1">
                    <input type="radio" name="compane" id="demo2" value="option1">
                    <input type="radio" name="compane" id="demo3" value="option1">
                </div>
                <div class="form-group">
                  <label for="phone">Мобильный телефон</label>
                  <input type="text" class="form-control" id="phone">
                </div>
                <div class="form-group">
                  <label for="name">Ваше ФИО</label>
                  <input type="text" class="form-control" id="name">
                </div>
                <div class="form-group">
                  <label for="qustion">Ваш вопрос</label>
                  <textarea class="form-control" id="question" rows="5"></textarea>
                  <p class="help-block"><span>Например: </span>...</p>
                </div>
                <div class="checkbox">
                  <label>
                  <input type="checkbox" checked> Соглашаюсь с <a href="Privacy_Policy.html">политикой конфиденциальности</a>
                  </label>
                </div>
                <button type="submit" class="btn btn-warning btn-lg">Задать вопрос</button>
              </form>

css

.radiobutton {
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

input[type="radio"] {
  display: none;
}

.custom-checkbox {
  background: #333;
  border: 8px solid #fff;
}

jquery

<script>
          $(document).ready(function () {
            $('input:radio').change(function () {
              $('label.radiobutton').addClass('custom_checkbox');
    });
});
        </script>

Теперь ошибка в jquery, нажатие на один из label с классом .radiobutton выделяет их все. Я так понимаю, что при переключении они останутся с добавленным классом .custom-checkbox. Как исправить?

Answer 1

[Виталий Киренков]

Если я вас правильно понял, то:

<label for="demo1" onclick="" class="radiobutton option_2"></label>
                 <label for="demo2" onclick="" class="radiobutton option_3"></label>
                 <label for="demo3" onclick="" class="radiobutton option_4"></label>

                    <input type="radio" name="compane" id="ulu" value="option_1">
                    <input type="radio" class="option_2" name="compane" id="demo1" value="option_2">
                    <input type="radio" class="option_3" name="compane" id="demo2" value="option_3">
                    <input type="radio" class="option_4" name="compane" id="demo3" value="option_4">

$(document).ready(function () {
  $('input:radio', ".form-group").change(function () {
    $('label.radiobutton.' + $(this).attr("class")).addClass('custom_checkbox');
  });
});

Comments

[Антон]

Отлично, работает! Только если нажать на каждый radio по очереди, то они все станут с примененным кастомным классом. Но не активные radio нужно вернуть в первоначальное состояние, я так понимаю тут нужен некий цикл для удаления custom_checkbox?

[Виталий Киренков]

@Nadwolf Так по идее должно работать
$('label.radiobutton.' + $(this).attr("class")).addClass('custom_checkbox').siblings().removeClass("custom_checkbox");

[Антон]

так не работает, по прежнему при переключении на следующий radio предыдущий остается с кастомным классом.

[Виталий Киренков]

@Nadwolf Так, давайте сначала, а то я всмотрелся в код и бред какой то...
Радио вообще никогда не показываются? Верно? То есть по сути нужно только лейблы тыкать и переключать на них активность, так?

[Антон]

Все верно, радио вообще никогда не показываются, переключаем только лейблы. Нужно сделать так чтобы при переключении, те что не выбраны возвращались в первоначальное состояние, то есть удалялся добавленный кастомный класс.

[Виталий Киренков]

@Nadwolf Ок. Я логику изначально не понял. Поменяйте просто яваскрипт
codepen.io/vitaliy_kirenkov/pen/lDyaG

$(document).ready(function () {
$(".radiobutton").on("click", function(){
$(this).addClass("custom-checkbox").siblings().removeClass("custom-checkbox");
})
});

[Антон]

Класс, в примере работает, а у меня нет mnb.url.ph/Cherkassy.html

[Виталий Киренков]

@Nadwolf пожалуйста, ну используйте мозг хоть чуть-чуть или внимательней будьте. Где классы radiobutton на лейблах?

[Виталий Киренков]

@Nadwolf посмотрите внимательно на хтмл, который я подкорректировал и написал выше, в самом начале.

[Антон]

Перепроверил, вы меня извините, может и правда туплю, но сделано так как у вас в примере, лейблы под стоимостью, класс radiobutton присутствует, классы option_ тоже на месте. При нажатии на лейбл срабатывает addClass("custom-checkbox"), но при нажатии на следующий лейбл, кастомный класс не удаляется у предыдущего, а лишь срабатывает addClass("custom-checkbox") для нового лейбла.

[Виталий Киренков]

@Nadwolf mnb.url.ph/Cherkassy.html - ваша ссылка?
Вот по ней в хтмл, я вижу, что у вас бустрап не подключается. У вас кривой линк \bootstrap.js вместо /bootstrap.js
Дальше, у меня в примере value у инпутов разные, ибо вы не можете передовать одно и то же значение при любом выборе...
Стилей нет никаких, я вообще ничего не вижу...

[Антон]

моя ошибка, исправил вот ссылка mnb.url.ph/sity/Cherkassy.html

[Виталий Киренков]

$(document).ready(function () {
var _radioButton = $(".radiobutton");
_radioButton.on("click", function(){
_radioButton.removeClass("custom-checkbox");
$(this).addClass("custom-checkbox");
})
});

И подучите js всё таки, пригодиться =)

[Антон]

Ура... работает, огромнейшее спасибо!