При выборе input type radio менять стиль блока

Question

Стоит такая задача. На HTML странице есть блок с классом right_box в котором выводятся блоки с номерами вопросов. Мне необходимо сделать так, чтобы когда я выбираю ответ например в 3 вопросе, то к классу у объекта down_mini добавляется used_mini.

<?php
    include "../script/func/function.php"; //Файл с фунциями
    session_start();
    check_coock(); //Проверка куки
    check_coock_testing();
    //------------ Задаем параметры для панели навигации -----------\\
    $exit = '<a href="../script/kill_coock.php">Выход</a>'; 
    $admin = '<a href="admin.php">Админ</a>';
    $main_page = '<a href="index.php">Главная</a>';
    $admin_hr = '<hr class="admin_hr">';
?>
<!DOCTYPE HTML>
<html lang="rus">
<head>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <link rel="icon" href="https://amt.rosminzdrav.ru/theme/image.php/adaptable/theme/1605257379/favicon">
    <link rel="stylesheet" href="../css/style-main.css">
    <link rel="stylesheet" href="../css/style-testing.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Тестирование</title>
</head>
<body>
    <p id="demo" class="time"></p> 
    <div class="up">
         <text class="goto_exit">?</text>
         <div class="exit_div">
          <?php //Выпадающий список навигации по сайту
            if (isset($_COOKIE["admin"])) { 
             echo $exit;             
             echo $admin_hr;             
             echo $admin;
             echo $admin_hr;
             echo $main_page;
            } else {
              echo $exit;
            }
          ?> 
         </div>
         <img src="../images/index/f1.png" alt="" class="user_img" >
         <text class="up_text">
             <?php //Данные пользователя (Имя и фамилия)
                 echo $_COOKIE["name"];
                 echo " ";
                 echo $_COOKIE["surname"];
             ?>
         </text>
     </div>
<header>
        <div>
            <text>Тестирование - 1 -й этап</text>
        </div>
</header>
     <div class="main">
         <div class="right_box"> <!-- Правый навигационный блок -->
             <div class="num_quest_box">
                 <p id="navigation"><img src="../images/testing/icon/menu.png" alt=""> Навигация по тесту</p>
                 <div class="nav_quest">
                     <?php
                        get_mass_session_testing();
                        for ($i = 1; $i < 61; $i++){
                            echo '<div class="mini_panel">
                                 <div class="up_mini">
                                     <span class="up_text_mini" > '.$i.' </span>
                                 </div>
                                 <div class="down_mini" id="'.$i.'" name="'.$_SESSION["mas_test"][$i].'">
        
                                 </div>
                             </div>';
                        }
                     ?>
                     <div class="mini_panel">
                         <div class="up_mini">
                             <span class="up_text_mini">1</span>
                         </div>
                         <div class="down_mini used_mini">

                         </div>
                     </div>
                 </div>
                 <p><a href="#">Закончить попытку...</a></p>
             </div>
         </div>
        <div class="content">

            <?php
                get_mass_session_testing();
                for ($i = 1; $i < 61; $i++) {
                    $num = get_num(4);
                    $id_qs = $_SESSION["mas_test"][$i];
                    echo'<div class="question">
                        <div class="left_box">
                        <span>Вопрос <b>'.$i.'</b></span><br>
                            <span>Пока нет ответа</span><br>
                            <span>Балл: 1,00</span><br>
                            <span><img src="../images/testing/icon/unflagged.png" alt="" id = "image" onClick="imgsrc(this)"> Отметить вопрос</span>
                        </div>';
                    echo withdraw_quest($num, get_quest($_SESSION["mas_test"][$i]), $id_qs);
                    echo '</div>';
                }
           ?>
        </div>
     </div>
<div class="formend">
    <form action="" class="endform">
        <input type="button" value="Завершить">
    </form>
</div>
<footer></footer>
<script>

    //----------- Смена отметки вопроса -----------------\\
    function imgsrc(img) {
        const imgs = ["../images/testing/icon/unflagged.png", "../images/testing/icon/flagged.png"];
        const index = ((+img.dataset.imageindex || 0) + 1) % imgs.length;
        img.dataset.imageindex = index;
        img.src = imgs[index];
    }
    //----------- Таймер -----------------\\
    let countDownDate = <?php echo $_COOKIE["hours"]?>;
    const x = setInterval(function () {
    const now = new Date().getTime();
    const distance = (countDownDate * 1000) - now;
    const hours = 0;
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        if (minutes >= 10) {
            if (seconds >= 10) {
                document.getElementById("demo").innerHTML = "Оставшееся время " + hours + ":" + minutes + ":" + seconds;
            } else {
                document.getElementById("demo").innerHTML = "Оставшееся время " + hours + ":" + minutes + ":0" + seconds;
            }
        } else {
            if (seconds >= 10) {
                document.getElementById("demo").innerHTML = "Оставшееся время " + hours + ":0" + minutes + ":" + seconds;
            } else {
                document.getElementById("demo").innerHTML = "Оставшееся время " + hours + ":0" + minutes + ":0" + seconds;
            }
        }
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "Время истелко";
        }
    }, 1000);
</script>
</body>
</html>

Answer 1

Смотри можеш сделать так. Что при клике добавлять класс.

HTML: <div class="down_mini"></div>

JavaScript c jQuery:

$(function() {
$('.down_mini').click(function() {
    $('.down_mini').addClass('used_mini');
});

});

И потом этому классу добавлять стили.

БЛОГ НА HUSL

При выборе input type radio менять стиль блока

Ответы (1 шт):