Question

这种情况基本上是这样的：

我有2个问题（必须回答两个问题）：
1.你抽烟吗？一种。是的b。没有
2.你喝酒吗？ a。是b。否

如果用户选择a。问题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

我想这就是你想要的。请让我来。

   <!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>

Answer 2

我不确定我是否正确理解您，并且我现在不知道为什么您想要这样的东西。但这应该可行

<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 3

根据我的理解，您可以使用使用事件侦听器的脚本来满足此要求，特别是单选按钮中值的更改。我建议您还建模一个简单的结构来捕获您的数据。可以实现以下内容。与其为问题使用ID，不如将它们与html data 属性相关联。在这种情况下，我们可以指定类似 data-question =“ 1” 的名称。从一开始就在输入元素上分配要使用的值，这将更为实用。因此，不要使用value =“ Y”尝试使用value =“ 2”或value =“ 1”。现在我们已经设置了html，我们将使用另一个结构来捕获值。我们声明一个包含对象的类型数组的const问题。每个对象代表一个问题，id属性是我们与输入中的 data-question 属性相关联的值。要查找输入，我们使用 document.querySelectorAll（selector）方法，因为两个单选按钮共享相同的属性。在我们简单地将事件监听器附加到处理函数之后，该处理函数只会更新该问题的答案。如果要添加结果，可以在问题const上使用forEach方法，并将其记录到控制台或在您认为合适的地方显示。希望这会有所帮助

`

<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>

`

JavaScript / HTML-为选定的单选按钮分配一个值

3 个答案: