JavaScript / HTML - назначить значение выбранному переключателю

Question

Дело в основном так:

У меня есть 2 вопроса (нужно ответить на оба вопроса):
1. Вы курите?а.Да б.Нет
2. Вы пьете?да. б.Нет

Если пользователь выбирает.в вопросе 1, тогда значение будет 2
Если пользователь выберет b.в вопросе 1, тогда значение будет 1
Если пользователь выберет.в вопросе 2 значение будет 2
Если пользователь выберет b.в вопросе 2 значение будет равно 1

После этого я суммирую значение для выбранных переключателей обоих вопросов и выведу его на экран.

Код для переключателей будет:

<ul>
  <li>Do you smoke cigarettes?<br>
    <input type="radio" name="smoke" id="yes1" value="Y" checked="checked">
    <label for="yes1">Yes</label> &ensp;&ensp;
    <input type="radio" name="smoke" id="no1" value="N">
    <label for="no1">No</label><br>
  </li>
  <li>Do you drink?<br>
    <input type="radio" name="drink" id="yes2" value="Y" checked="checked">
    <label for="yes2">Yes</label> &ensp;&ensp;
    <input type="radio" name="drink" id="no2" value="N">
    <label for="no2">No</label><br><br></li>
</ul>

Я знаю, что значение в переключателе можно изменить, но я хочу присвоить значение в функции javascript.(Значение в переключателе имеет свое собственное назначение.)

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

Заранее спасибо.

Answer 1

Я не уверен, что понимаю вас правильно, и я не знаю, почему вы хотите что-то подобное.Но это должно работать

<ul>
  <li>Do you smoke cigarettes?<br>
    <input type="radio" name="smoke" id="yes1" value="Y" checked="checked" onchange="yesSelected(this)">
    <label for="yes1">Yes</label> &ensp;&ensp;
    <input type="radio" name="smoke" id="no1" value="N" onchange="noSelected(this)">
    <label for="no1">No</label><br>
  </li>
  <li>Do you drink?<br>
    <input type="radio" name="drink" id="yes2" value="Y" checked="checked" onchange="yesSelected(this)">
    <label for="yes2">Yes</label> &ensp;&ensp;
    <input type="radio" name="drink" id="no2" value="N" onchange="noSelected(this)">
    <label for="no2">No</label><br><br></li>
</ul>

<script type="text/javascript">
  function yesSelected(input){
    input.value = 2
    console.log(input.value)
  }
  function noSelected(input){
    input.value = 1
    console.log(input.value)
  }
</script>

Answer 2

Насколько я понимаю, вы могли бы удовлетворить это с помощью сценария, который использует прослушиватели событий, в частности, изменение значения в ваших переключателях.Я бы также предложил смоделировать простую структуру для сбора ваших данных.Следующее может быть реализовано.Вместо использования идентификатора для вопроса, свяжите их с атрибутом html data .В этом случае мы можем указать что-то вроде data-question = "1" .Также было бы более целесообразно назначить значение, которое вы собираетесь использовать для элемента ввода с самого начала.Поэтому вместо использования value = "Y" попробуйте value = "2" или value = "1".Теперь, когда у нас настроен HTML, мы будем использовать другую структуру, на этот раз для захвата значения.Мы объявляем постоянный вопрос о массиве типов, который содержит объекты.Каждый объект представляет вопрос, свойство id - это значение, которое мы связываем с атрибутом data-question на нашем входе.Чтобы найти входные данные, мы используем метод document.querySelectorAll (селектор) , поскольку две переключатели имеют один и тот же атрибут.После того, как мы просто присоединяем наш обработчик событий с помощью функции-обработчика, которая просто обновляет наш ответ на этот вопрос.если вы хотите добавить результат, вы можете использовать метод forEach в вопросе const и записать его в консоль или представить его там, где считаете нужным.Надеюсь, это поможет

`

<ul>
  <li>Do you smoke cigarettes?<br>
    <input type="radio" name="smoke" data-question="1" value="2" checked="checked">
    <label for="yes1">Yes</label> &ensp;&ensp;
    <input type="radio" name="smoke" data-question="1" value="1">
    <label for="no1">No</label><br>
  </li>
  <li>Do you drink?<br>
    <input type="radio" name="drink" data-question="2" value="2" checked="checked">
    <label for="yes2">Yes</label> &ensp;&ensp;
    <input type="radio" name="drink" data-question="2" value="1">
    <label for="no2">No</label><br><br></li>
</ul>

<script>
const questions = [{id:1, answer:undefined},{id:2, answer: undefined}]

for(current of questions){
    let inputs = document.querySelectorAll('[data-question="'+current.id+'"]');
  for(input of inputs){
    input.addEventListener('change',function(e){ current.answer = e.target.value})
  }
}
</script>

`

Answer 3

Я думаю, это то, что вы хотите.пожалуйста, дайте мне.

   <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <body>
        <ul>
            <li>Do you smoke cigarettes?<br>
                <input type="radio" name="smoke" id="yes1" data-vale = '2' value="Y" checked="checked">
                <label for="yes1">Yes</label> &ensp;&ensp;
                <input type="radio" name="smoke" id="no1" data-vale = '1' value="N">
                <label for="no1">No</label><br>
            </li>
            <li>Do you drink?<br>
                <input type="radio" name="drink" id="yes2" data-vale = '2' value="Y" checked="checked">
                <label for="yes2">Yes</label> &ensp;&ensp;
                <input type="radio" name="drink" id="no2" data-vale = '1' value="N">
                <label for="no2">No</label><br><br>
            </li>
        </ul>
        <input type="button" value="Get Value">
        <script type="text/javascript">
            $(document).ready(function(){
                $("input[type='button']").click(function(){
                    var radioValue = $("input[name='smoke']:checked").attr('data-vale');
                    var radioValue2 = $("input[name='drink']:checked").attr('data-vale');
                    console.log( parseInt(radioValue) +parseInt(radioValue2) )
                });

            });

            /*
            * OR if you dont want to change HTML and may be this will work for you
            *
            $(document).ready(function(){
                $("input[type='button']").click(function(){
                    var radioValue = $("input[name='smoke']:checked").val() == 'Y' ? 2 : 1;
                    var radioValue2 = $("input[name='drink']:checked").val() == 'Y' ? 2 : 1;
                    console.log( parseInt(radioValue) +parseInt(radioValue2) )
                });
            });
            */
        </script> 
    </body>
    </html>