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

标签 javascript html radio-button

案件基本是这样的:

我有 2 个问题(必须回答这两个问题):
1.你抽烟吗? A。是的 B.否
2.你喝酒吗? a. 是 b.没有

如果用户选择a.在问题 1 中,则值为 2
如果用户选择b。在问题 1 中,则值为 1
如果用户选择a.在问题 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 函数中分配值。 (单选按钮中的值有其自己的用途。)

就是这样。尽管我用谷歌搜索了一下,但仍然没有解决我的问题的解决方案。任何意见或建议将不胜感激。

提前谢谢您。

最佳答案

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

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

关于JavaScript/HTML - 为选定的单选按钮分配一个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54880692/

相关文章:

javascript - 如何为每个轨道添加播放和停止按钮?

javascript - 验证用户输入,以便用户只能输入字母

javascript - 如果我选中 2 个输入单选按钮,禁用的“提交”按钮将启用,但如果我取消选中它们...“提交”按钮不会禁用返回

javascript - Bootstrap 开关无法处理 Ajax 数据

javascript - 如何删除滚动sidenav

javascript - 如何使用 jquery 将 ".01"添加到文本框值

android - 使用多个 fragment 设置 RadioButton.setChecked

javascript - 如何在内容可滚动的情况下隐藏滚动条?

javascript - Dev Tools Chrome with JQuery 你可以启用/禁用东西

php - 存储多个单选按钮数据