JavaScript / HTML - 为选定的单选按钮指定值

问题描述 投票:0回答:3

案件基本上是这样的:

我有两个问题(必须回答两个问题): 你吸烟吗?一个。是的b。没有 你喝酒吗? a。是的b。没有

如果用户选择了。在问题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>
I know that the value in the radio button can be changed but I want to assign value in the javascript function. (The value in the radio button has it's own purpose.)

而已。即使我用谷歌搜索它,但仍然没有解决我的问题的解决方案。任何建议或意见将不胜感激。

先感谢您。

javascript html radio-button
3个回答
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>

0
投票

我不确定我是否理解你,我现在不知道为什么你想要这样的东西。但这应该有效

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

0
投票

根据我的理解,您可以使用使用事件侦听器的脚本来满足此要求,特别是在单选按钮中更改值。我建议还建模一个简单的结构来捕获你的数据。以下可以实施。而不是使用问题的ID,将它们与html数据属性相关联。在这种情况下,我们可以指定类似data-question =“1”的内容。从一开始就为输入元素分配您打算使用的值也更实际。因此,不要使用value =“Y”,而是尝试value =“2”或value =“1”。现在我们已经设置了html,我们将使用另一种结构,这次是为了捕获值。我们声明了一个包含对象的类型数组的const问题。每个对象代表一个问题,id属性是我们与输入中的data-question属性关联的值。要查找输入,我们使用document.querySelectorAll(selector)方法,因为两个单选按钮共享相同的属性。在我们简单地使用处理程序函数附加我们的eventlistener之后,只更新我们对该问题的答案。如果你想添加结果,可以在问题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>

`

© www.soinside.com 2019 - 2024. All rights reserved.