Выбрать все вариант A с помощью переключателей с javascript

если выбран вариант 4 звезды сверху, я хочу, чтобы были выбраны все параметры 4 звезды из формы. если вариант 3 звезды выбран сверху, должны быть выбраны все 3 звезды. Я пробовал использовать этот код, но не не работает для меня.

Javascript:

function valueChanged() {
    if (document.getElementById("four").checked == true) {
        document.getElementById("q14").checked = true;
        document.getElementById("q24").checked = true;
        document.getElementById("q34").checked = true;
        document.getElementById("q44").checked = true;
        document.getElementById("q54").checked = true;
        } 

else if (document.getElementById("three").checked == true) {
        document.getElementById("q13").checked = true;
        document.getElementById("q23").checked = true;
        document.getElementById("q33").checked = true;
        document.getElementById("q43").checked = true;
        document.getElementById("q53").checked = true;
        }

else if (document.getElementById("two").checked == true) {
        document.getElementById("q12").checked = true;
        document.getElementById("q22").checked = true;
        document.getElementById("q32").checked = true;
        document.getElementById("q42").checked = true;
        document.getElementById("q52").checked = true;
        }

else if (document.getElementById("one").checked == true) {
        document.getElementById("q11").checked = true;
        document.getElementById("q21").checked = true;
        document.getElementById("q31").checked = true;
        document.getElementById("q41").checked = true;
        document.getElementById("q51").checked = true;

    }
     else{
        return null;
    }`

введите описание изображения здесь

HTML: 4 звезды 3 звезды 2 звезды 1 звезда

            <div class = "container con">
               <div class = "row">
                    <div class = "col-sm-8 col1" ><table cellpadding = "13">
                        <tr><td>1.Technical Skills</td></tr>
                        <tr><td>2.Sincerity, Commitment, Regularity, and Punctuality</td></tr>
                        <tr><td>3.Ability to clarify doubts, and teaching with relevant examples</td></tr>
                        <tr><td>4.Accessibility of teachers for doubts and clarifications outside the class</td></tr>
                        <tr><td>5.Ability to command and control the class including evaluation / examination</td></tr>
                    </table>


                </div>
                    <div class = "col-sm-4 col2" align = "center"><table class = "table1"><tr ><td id = "rate-area-1">
                            <input type = "radio" id = "q14" name = "q1" value = "4" onchange = "valueChanged()"/><label for = "4-star" title = "Very Good">4 stars</label>
                            <input type = "radio" id = "q13" name = "q1" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
                            <input type = "radio" id = "q12" name = "q1" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
                            <input type = "radio" id = "q11" name = "q1" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
                            </td></tr>
                            <tr ><td class = "rate-area-2">
                            <input type = "radio" id = "q24" name = "q2" value = "4" onchange = "valueChanged()" /><label for = "4-star" title = "Very Good">4 stars</label>
                            <input type = "radio" id = "q23" name = "q2" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
                            <input type = "radio" id = "q22" name = "q2" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
                            <input type = "radio" id = "q21" name = "q2" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
                        </td></tr>
                        <tr ><td class = "rate-area">
                            <input type = "radio" id = "q34" name = "q3" value = "4" onchange = "valueChanged()" /><label for = "4-star" title = "Very Good">4 stars</label>
                            <input type = "radio" id = "q33" name = "q3" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
                            <input type = "radio" id = "q32" name = "q3" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
                            <input type = "radio" id = "q31" name = "q3" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
                        </td></tr>
                            <tr ><td class = "rate-area">
                            <input type = "radio" id = "q44" name = "q4" value = "4" onchange = "valueChanged()" /><label for = "4-star" title = "Very Good">4 stars</label>
                            <input type = "radio" id = "q43" name = "q4" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
                            <input type = "radio" id = "q42" name = "q4" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
                            <input type = "radio" id = "q41" name = "q4" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
                        </td></tr>
                            <tr ><td class = "rate-area">
                            <input type = "radio" id = "q54" name = "q5" value = "4" onchange = "valueChanged()" /><label for = "4-star" title = "Very Good">4 stars</label>
                            <input type = "radio" id = "q53" name = "q5" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
                            <input type = "radio" id = "q52" name = "q5" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
                            <input type = "radio" id = "q51" name = "q5" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
                        </td></tr></table>

пожалуйста, помогите с некоторым кодом, который я новичок в javascript здесь

Не могли бы вы подробнее рассказать, что означает фраза «у меня не сработало»? Что случилось? Выполнилась ваша функция или нет? Вы получили ошибку? и т.п.

— 23.07.2018 06:22

Я также заметил, что у вас есть label for = "4-star" ... без ввода с идентификатором 4-star (это верно для всех "n-звездочек". Атрибут for должен соответствовать свойству id другого элемента. Кроме того, в вашей функции вы проверяете идентификатор four, three и т. д., которых также нет в вашем html

— 23.07.2018 06:25

если я выберу опцию 4 звезды, будут выбраны все опции 4 звезды, но когда я выберу опцию 3 звезды сверху, ничего не произойдет

— 23.07.2018 06:40

javascript jquery html radio-button radio-group

23.07.2018 06:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Картинка, которую вы показываете, и код, который вы опубликовали, каким-то образом показывают две разные вещи. Добавьте этот верхний ряд элементов ввода и дайте им onchange = "valueChanged()" (не все 4-звездочные кнопки, как сейчас по какой-то причине), и он работает.

function valueChanged() {
    if (document.getElementById("four").checked == true) {
        document.getElementById("q14").checked = true;
        document.getElementById("q24").checked = true;
        document.getElementById("q34").checked = true;
        document.getElementById("q44").checked = true;
        document.getElementById("q54").checked = true;
        } 

else if (document.getElementById("three").checked == true) {
        document.getElementById("q13").checked = true;
        document.getElementById("q23").checked = true;
        document.getElementById("q33").checked = true;
        document.getElementById("q43").checked = true;
        document.getElementById("q53").checked = true;
        }

else if (document.getElementById("two").checked == true) {
        document.getElementById("q12").checked = true;
        document.getElementById("q22").checked = true;
        document.getElementById("q32").checked = true;
        document.getElementById("q42").checked = true;
        document.getElementById("q52").checked = true;
        }

else if (document.getElementById("one").checked == true) {
        document.getElementById("q11").checked = true;
        document.getElementById("q21").checked = true;
        document.getElementById("q31").checked = true;
        document.getElementById("q41").checked = true;
        document.getElementById("q51").checked = true;

    }
     else{
        return null;
    }
}

<div class = "col-sm-4 col2" align = "center"><table class = "table1"><tr ><td id = "rate-area-1">
        <input type = "radio" id = "four" name = "q1" value = "4" onchange = "valueChanged()"/><label for = "4-star" title = "Very Good">4 stars</label>
        <input type = "radio" id = "three" name = "q1" value = "3" onchange = "valueChanged()"/><label for = "3-star" title = "Good">3 stars</label>
        <input type = "radio" id = "two" name = "q1" value = "2" onchange = "valueChanged()"/><label for = "2-star" title = "Satisfactory">2 stars</label>
        <input type = "radio" id = "one" name = "q1" value = "1" onchange = "valueChanged()"/><label for = "1-star" title = "Unsatisfactory">1 star</label>
        </td></tr>

<div class = "container con">
<div class = "row">
<div class = "col-sm-8 col1" ><table cellpadding = "13">
    <tr><td>1.Technical Skills</td></tr>
    <tr><td>2.Sincerity, Commitment, Regularity, and Punctuality</td></tr>
    <tr><td>3.Ability to clarify doubts, and teaching with relevant examples</td></tr>
    <tr><td>4.Accessibility of teachers for doubts and clarifications outside the class</td></tr>
    <tr><td>5.Ability to command and control the class including evaluation / examination</td></tr>
</table>


</div>
<div class = "col-sm-4 col2" align = "center"><table class = "table1"><tr ><td id = "rate-area-1">
        <input type = "radio" id = "q14" name = "q1" value = "4" /><label for = "4-star" title = "Very Good">4 stars</label>
        <input type = "radio" id = "q13" name = "q1" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
        <input type = "radio" id = "q12" name = "q1" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
        <input type = "radio" id = "q11" name = "q1" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
        </td></tr>
        <tr ><td class = "rate-area-2">
        <input type = "radio" id = "q24" name = "q2" value = "4" /><label for = "4-star" title = "Very Good">4 stars</label>
        <input type = "radio" id = "q23" name = "q2" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
        <input type = "radio" id = "q22" name = "q2" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
        <input type = "radio" id = "q21" name = "q2" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td></tr>
    <tr ><td class = "rate-area">
        <input type = "radio" id = "q34" name = "q3" value = "4" /><label for = "4-star" title = "Very Good">4 stars</label>
        <input type = "radio" id = "q33" name = "q3" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
        <input type = "radio" id = "q32" name = "q3" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
        <input type = "radio" id = "q31" name = "q3" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td></tr>
        <tr ><td class = "rate-area">
        <input type = "radio" id = "q44" name = "q4" value = "4" /><label for = "4-star" title = "Very Good">4 stars</label>
        <input type = "radio" id = "q43" name = "q4" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
        <input type = "radio" id = "q42" name = "q4" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
        <input type = "radio" id = "q41" name = "q4" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td></tr>
        <tr ><td class = "rate-area">
        <input type = "radio" id = "q54" name = "q5" value = "4" /><label for = "4-star" title = "Very Good">4 stars</label>
        <input type = "radio" id = "q53" name = "q5" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
        <input type = "radio" id = "q52" name = "q5" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
        <input type = "radio" id = "q51" name = "q5" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td></tr></table>

С учетом сказанного, вы можете захотеть упростить свой код. Дайте каждому рейтингу x-star класс, дайте верхнему переключателю знать, к каким радиостанциям он подключен, и вам не придется писать гигантское заявление if-else.

Верхний набор переключателей не остается выбранным, я не знаю, заботится ли об этом OP или нет, но это нужно учитывать.

— 23.07.2018 06:39

23.07.2018 06:28

Ответ принят как подходящий

Было бы более элегантно использовать делегирование событий - проверьте индекс выбранной цели в ее контейнере, затем выберите все input этого индекса внутри их контейнеров и check их:

const table1 = document.querySelector('.table1');
table1.addEventListener('change', (e) => {
  const { target } = e;
  const { children } = target.parentElement;
  if (!target.matches('#rate-area-1 input[type = "radio"]')) return;
  // Get the index of the changed input:
  const index = Array.prototype.indexOf.call(children, target);
  const selector = 'input:nth-child(' + (index + 1) + ')'
  table1.querySelectorAll(selector)
    .forEach(input => input.checked = true);
});

<table class = "table1">
  <tr>
    <td id = "rate-area-1">
      <input type = "radio" id = "q14" name = "q1" value = "4"/><label for = "4-star" title = "Very Good">4 stars</label>
      <input type = "radio" id = "q13" name = "q1" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
      <input type = "radio" id = "q12" name = "q1" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
      <input type = "radio" id = "q11" name = "q1" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td>
  </tr>
  <tr>
    <td class = "rate-area-2">
      <input type = "radio" id = "q24" name = "q2" value = "4"/><label for = "4-star" title = "Very Good">4 stars</label>
      <input type = "radio" id = "q23" name = "q2" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
      <input type = "radio" id = "q22" name = "q2" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
      <input type = "radio" id = "q21" name = "q2" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td>
  </tr>
  <tr>
    <td class = "rate-area">
      <input type = "radio" id = "q34" name = "q3" value = "4"/><label for = "4-star" title = "Very Good">4 stars</label>
      <input type = "radio" id = "q33" name = "q3" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
      <input type = "radio" id = "q32" name = "q3" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
      <input type = "radio" id = "q31" name = "q3" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td>
  </tr>
  <tr>
    <td class = "rate-area">
      <input type = "radio" id = "q44" name = "q4" value = "4"/><label for = "4-star" title = "Very Good">4 stars</label>
      <input type = "radio" id = "q43" name = "q4" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
      <input type = "radio" id = "q42" name = "q4" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
      <input type = "radio" id = "q41" name = "q4" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td>
  </tr>
  <tr>
    <td class = "rate-area">
      <input type = "radio" id = "q54" name = "q5" value = "4"/><label for = "4-star" title = "Very Good">4 stars</label>
      <input type = "radio" id = "q53" name = "q5" value = "3" /><label for = "3-star" title = "Good">3 stars</label>
      <input type = "radio" id = "q52" name = "q5" value = "2" /><label for = "2-star" title = "Satisfactory">2 stars</label>
      <input type = "radio" id = "q51" name = "q5" value = "1" /><label for = "1-star" title = "Unsatisfactory">1 star</label>
    </td>
  </tr>
</table>

23.07.2018 06:29

Другие вопросы по теме

Javascript: преобразовать массив в формат CSV и скопировать в буфер обмена

Анимировать изображение, добавить его в конец, вернуть обратно ... повторять бесконечно

Выпадающий список с полем ввода параметров

JQuery - Невозможно обновить представление после успешного выполнения функции без обновления

Использование setTimeOut при вводе пользователем для запуска события

Отправка формы jquery не работает?

<autofocus> невозможно повторно получать фокус, пока страница не обновится

Добавление класса в тело всплывающего окна

Сова-карусель - скользите по нескольким каруселям, используя только одну слайд-карусель с точками

Как мне сгенерировать код / ключ безопасности для оформления заказа на woocommerce?

Выбрать все вариант A с помощью переключателей с javascript

Ответы 2

Другие вопросы по теме

Похожие вопросы