Получения checked из input type = radio

@Adam_miller · Регистрация: 05.11.2021

Author24 — интернет-сервис помощи студентам

Есть калькулятор с возможными шаблонами окон(размеры секции и тд) нужно получить cheked(флажок, точку) из input type = radio в js чтобы в js производить расчеты из выбранных input'ов, label'ы связаны с input'ами и являются кнопками по которым и должен(наверное) работать onclick=""

HTML5

<div class="calc">
                        <div class="calc_form_options">
                            <div class="calc_form_options_typecatigory">
                                <label onclick="calc()" for="ot1" class="options_typecatigory">Эконом<input type="radio" name="r1" id="ot1" class="radio_calc" ></label>
                                <label for="ot2" class="options_typecatigory">Стандарт<input type="radio" name="r1" id="ot2" class="radio_calc" ></label>
                                <label for="ot3" class="options_typecatigory">Премиум<input type="radio" name="r1" id="ot3" class="radio_calc" ></label>
                            </div>
                            <div class="calc_form_options_typewindow">
                                <p>Форма окна:</p>
                                <div class="typewindow_1">
                                    <label for="otw1" class="typewindow"><img src="img/1.svg" class="img_calc"><input type="radio" name="options_typewindow" class="radio_calc" id="otw1"></label>
                                    <label for="otw2" class="typewindow"><img src="img/2.svg" class="img_calc"><input type="radio" name="options_typewindow" class="radio_calc" id="otw2"></label>
                                    <label for="otw3" class="typewindow"><img src="img/3.svg" class="img_calc"><input type="radio" name="options_typewindow" class="radio_calc" id="otw3"></label>
                                </div>
                                <div class="typewindow_2">
                                    <label for="otw4" class="typewindow"><img src="img/4.svg" class="img_calc"><input type="radio" name="options_typewindow" class="radio_calc" id="otw4"></label>
                                    <label for="otw5" class="typewindow"><img src="img/5.svg" class="img_calc"><input type="radio" name="options_typewindow" class="radio_calc" id="otw5"></label>
                                    <label for="otw6" class="typewindow"><img src="img/6.svg" class="img_calc"><input type="radio" name="options_typewindow" class="radio_calc" id="otw6"></label>
                                </div>
                                <div class="typewindow_3">
                                    <label for="otw7" class="typewindow"><img src="img/7.svg" class="img_calc2"><input type="radio" name="options_typewindow" class="radio_calc" id="otw7"></label>
                                    <label for="otw8" class="typewindow"><img src="img/8.svg" class="img_calc2"><input type="radio" name="options_typewindow" class="radio_calc" id="otw8"></label>
                                </div>
                                <div class="typewindow_4">
                                    <label for="otw9" class="typewindow"><img src="img/9.svg" class="img_calc3"><input type="radio" name="options_typewindow" class="radio_calc" id="otw9"></label>
                                    <label for="otw10" class="typewindow"><img src="img/10.svg" class="img_calc3"><input type="radio" name="options_typewindow" class="radio_calc" id="otw10"></label>
                                </div>
                            </div><p>Доп опции</p>
                            <div class="calc_form_options_dop_options">
                                    <div class="calc_form_options_dop_options_element"><input type="checkbox" name="">Москитная сетка</div>
                                    <div class="calc_form_options_dop_options_element"><input type="checkbox" name="">Подоконник</div>
                                    <div class="calc_form_options_dop_options_element"><input type="checkbox" name="">Откосы</div>
                                    <div class="calc_form_options_dop_options_element"><input type="checkbox" name="">Отливы</div>
                                    <div class="calc_form_options_dop_options_element"><input type="checkbox" name="">Доставка</div>
                            </div>

@klyapa · 25.05.2022, 00:34

Javascript

const checks = [
    'calc_form_options_typecatigory',
    'calc_form_options_typewindow',
    'calc_form_options_dop_options'
].reduce((a, b) => (a[b] = [...document.querySelectorAll(`.${b} input`)].filter(e => e.checked), a), {});
 
console.log(checks);
/*
    {
        'calc_form_options_typecatigory': [...]
        'calc_form_options_typewindow': [...]
        'calc_form_options_dop_options': [...]
    }
*/

@Padonak · 25.05.2022, 00:43

А вот каждый кликнутый отчитывается:

PHP/HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    
    </style>
   <script>
   onload = function(){
   document.querySelector('.calc').addEventListener('click', function(e){
   let txt = '';
   if(e.target.tagName == 'INPUT') e.target.checked ? (txt = e.target.name + ' = ' + e.target.value) : (txt = e.target.name + ' инпут теперь не выбран checked = ' + e.target.checked);
   document.querySelector('#res').innerHTML = txt;
   });
   }
   </script>
  </head>
  <body>    
    <div class="calc">
                        <div class="calc_form_options">
                            <div class="calc_form_options_typecatigory">
                                <label onclick="calc()" for="ot1" class="options_typecatigory">Эконом<input value="1" type="radio" name="r1" id="ot1" class="radio_calc" ></label>
                                <label for="ot2" class="options_typecatigory">Стандарт<input value="2" type="radio" name="r1" id="ot2" class="radio_calc" ></label>
                                <label for="ot3" class="options_typecatigory">Премиум<input value="3" type="radio" name="r1" id="ot3" class="radio_calc" ></label>
                            </div>
                            <div class="calc_form_options_typewindow">
                                <p>Форма окна:</p>
                                <div class="typewindow_1">
                                    <label for="otw1" class="typewindow"><img src="img/1.svg" class="img_calc"><input value="4" type="radio" name="options_typewindow" class="radio_calc" id="otw1"></label>
                                    <label for="otw2" class="typewindow"><img src="img/2.svg" class="img_calc"><input value="5" type="radio" name="options_typewindow" class="radio_calc" id="otw2"></label>
                                    <label for="otw3" class="typewindow"><img src="img/3.svg" class="img_calc"><input value="6" type="radio" name="options_typewindow" class="radio_calc" id="otw3"></label>
                                </div>
                                <div class="typewindow_2">
                                    <label for="otw4" class="typewindow"><img src="img/4.svg" class="img_calc"><input value="7" type="radio" name="options_typewindow" class="radio_calc" id="otw4"></label>
                                    <label for="otw5" class="typewindow"><img src="img/5.svg" class="img_calc"><input value="8" type="radio" name="options_typewindow" class="radio_calc" id="otw5"></label>
                                    <label for="otw6" class="typewindow"><img src="img/6.svg" class="img_calc"><input value="9" type="radio" name="options_typewindow" class="radio_calc" id="otw6"></label>
                                </div>
                                <div class="typewindow_3">
                                    <label for="otw7" class="typewindow"><img src="img/7.svg" class="img_calc2"><input value="10" type="radio" name="options_typewindow" class="radio_calc" id="otw7"></label>
                                    <label for="otw8" class="typewindow"><img src="img/8.svg" class="img_calc2"><input value="11" type="radio" name="options_typewindow" class="radio_calc" id="otw8"></label>
                                </div>
                                <div class="typewindow_4">
                                    <label for="otw9" class="typewindow"><img src="img/9.svg" class="img_calc3"><input value="12" type="radio" name="options_typewindow" class="radio_calc" id="otw9"></label>
                                    <label for="otw10" class="typewindow"><img src="img/10.svg" class="img_calc3"><input value="13" type="radio" name="options_typewindow" class="radio_calc" id="otw10"></label>
                                </div>
                            </div><p>Доп опции</p>
                            <div class="calc_form_options_dop_options">
                                    <div class="calc_form_options_dop_options_element"><input value="14" type="checkbox" name="">Москитная сетка</div>
                                    <div class="calc_form_options_dop_options_element"><input value="15" type="checkbox" name="">Подоконник</div>
                                    <div class="calc_form_options_dop_options_element"><input value="16" type="checkbox" name="">Откосы</div>
                                    <div class="calc_form_options_dop_options_element"><input value="17" type="checkbox" name="">Отливы</div>
                                    <div class="calc_form_options_dop_options_element"><input value="18" type="checkbox" name="">Доставка</div>
                            </div>
                            <div id="res"></div>
  </body>
</html>

	25.05.2022, 00:43