Получить значение в переменную

[MC-XOBAHCK]

Здравствуйте!
Помогите пожалуйста, совсем запутался.
Мне нужно получить значение из группы кнопок. Макет кнопок следующий:

<div class="col-6 krovColor">
	<div class="btn-group" role="group" aria-label="Basic example">
		<button type="button" class="btn btn-primary" name="color" value="Терракотовый">1</button>
		<button type="button" class="btn btn-secondary" name="color" value="Медный">2</button>
		<button type="button" class="btn btn-success" name="color" value="Каштановый">3</button>
		<button type="button" class="btn btn-danger" name="color" value="Коричневый">4</button>
		<button type="button" class="btn btn-warning" name="color" value="Кирпичный">5</button>
	</div>
</div>

Можно ли с такого макета получать значение? Я запутался вот решил спросить.
У меня на jQury вот такое начало, но оно не работает:

$(function() {
    var color = $('.krovColor > button[name="color"]').val();
        console.log(color);
});

Подскажите, что я неправильно делаю. Или правильно эти кнопки на radio переделать, чтобы был переключатель?
Я макет верстаю по бутстрапу, есть такой ещё вариант под макет группы кнопок:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Мне правильно будет перейти на радио группу кнопок?

[рони]

MC-XOBAHCK,
$('.krovColor > button[name="color"]').val(); убрать красное, добавить фильтрацию или цикл если нужно

[MC-XOBAHCK]

Я так понял что мне лучше делать радио-переключатель. Вот переписал под группу. Пока классы цветов для кнопок взял бутстраповские, потом перепишу под нужные мне оттенки.

Просьба - посмотрите пожалуйста мой макет, может какие атрибуты лишние и их стоит удалить.

<div class="col-6 krovColor">
 <div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="radio" name="color" id="option1" autocomplete="off" value="Терракотовый" checked>1</label>
	<label class="btn btn-secondary">
		<input type="radio" name="color" id="option2" autocomplete="off" value="Медный">2</label>
	<label class="btn btn-success">
		<input type="radio" name="color" id="option3" autocomplete="off" value="Каштановый">3</label>
	<label class="btn btn-danger">
		<input type="radio" name="color" id="option3" autocomplete="off" value="Коричневый">4</label>
	<label class="btn btn-warning">
		<input type="radio" name="color" id="option3" autocomplete="off" value="Кирпичный">5</label>
	</div>
</div>

Думаю такой макет с переключателем (радио) правильнее, а визуально он не отличается от предыдущего.
По обработке радио кнопок я на jQuery и здесь видел документацию - должен справиться с решением, но если есть готовое решение как правильно брать значение - ругать не буду.
Меня интересует какие атрибуты лишние чтобы их убрать. На странице сайта будет похожий переключатель только с другим параметром.

[laimas]

MC-XOBAHCK,
autocomplete="off" - убрать в тег формы.

value="Каштановый">3</label> - это нелогично передавать на сервер текст, а пользователю показывать цифры. Цифры (integer тип), это самое удобное для "распознать/проверить/найти" и они зачастую и являются идентификаторами "каштановых, кирпичных, ...", то что показывают пользователю и чем он оперирует.

$('селектор группы').val(); - вернет значение первого из набора, и в случае радио кнопок нужно указывать в качестве селектора выбранную кнопку.

[MC-XOBAHCK]

По value="Каштановый">3</label> я с вами согласен, просто цифры расставил так, чтобы пока не мешало и не путаться.

<div class="col-6 krovColor">
 <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="color" value="Терракотовый" checked>1</label>
    <label class="btn btn-secondary">
        <input type="radio" name="color" value="Медный">2</label>
    <label class="btn btn-success">
        <input type="radio" name="color" value="Каштановый">3</label>
    <label class="btn btn-danger">
        <input type="radio" name="color" value="Коричневый">4</label>
    <label class="btn btn-warning">
        <input type="radio" name="color" value="Кирпичный">5</label>
    </div>
</div>

В скрипте на jQuery я смог получить выбранный value, но я не могу теперь в новую переменную вытянуть результат из обработчика:

$(function() {
    var color = $('.krovColor input[name="color"]');

    color.change(function krColor() {
        var krCol = $(this).val();
       //console.log(krCol);
       return krCol;
    });

    var selectedColor = krColor();    //Это неправильно и не работает.
});

Поправьте пожалуйста, как мне теперь в новую переменную получить значение из обработчика?

[j0hnik]

$(function() {
    $('.krovColor input[name="color"]').change(function() {
      var selectedColor =  $(this).val();
      console.log(selectedColor);
    });
});

[j0hnik]

а по путю, вот так

var selectedColor = $('.krovColor input[name="color"]:checked').val();

поместите в ту функцию где она нужна

[laimas]

var selectedColor = $(this).val();

А var selectedColor = this.value; не достаточно?

[j0hnik]

А var selectedColor = this.value; не достаточно?

вполне