时间戳

首页 > 解决方案 > JavaScript/HTML - 为选定的单选按钮分配一个值

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

问题描述

情况基本是这样的：

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

如果用户选择一个。
在问题 1 中，如果用户选择 b ，则值为 2 。
在问题 1 中，如果用户选择 a ，则值为 1 。
在问题 2 中，如果用户选择 b ，则值为 2 。在问题 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 函数中分配值。（单选按钮中的值有它自己的用途。）

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

先感谢您。

标签： javascripthtmlradio-button

解决方案

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

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

推荐阅读