Jquery：读取按钮以选择变量，添加并提交它们答案

【问题标题】：Jquery: reading buttons to select variables, adding and submitting themJquery：读取按钮以选择变量，添加并提交它们
【发布时间】：2017-02-18 00:12:17
【问题描述】：

我无法完成这项工作。这是引导程序和一些自定义 jquery，但我是一个冷酷的新手，我相信你会看到的。

<form name="rolls" id="rolls">
<div style="height:6px;"></div>
    <div class="btn-group btn-group-justified" id="die1" data-toggle="buttons" >
                <label class="btn btn-primary">
                    <input type="radio" name="die1" value="1" autocomplete="off" checked >1
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="die1" value="2" autocomplete="off" >2
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="die1" value="3" autocomplete="off" >3
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="die1" value="4" autocomplete="off" >4
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="die1" value="5" autocomplete="off" >5
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="die1" value="6" autocomplete="off" >6
                </label>
        </div>


<div style="height:12px;"></div>

    <div class="btn-group btn-group-justified" id="die2" data-toggle="buttons" >
                <label class="btn btn-info">
                    <input type="radio" name="die2" value="1" autocomplete="off" >1

                </label>
                <label class="btn btn-info">
                    <input type="radio" name="die2" value="2" autocomplete="off" >2
                </label>
                <label class="btn btn-info">
                    <input type="radio" name="die2" value="3" autocomplete="off" >3
                </label>
                <label class="btn btn-info">
                    <input type="radio" name="die2" value="4" autocomplete="off" >4
                </label>
                <label class="btn btn-info">
                    <input type="radio" name="die2" value="5" autocomplete="off" >5
                </label>
                <label class="btn btn-info">
                    <input type="radio" name="die2" value="6" autocomplete="off" >6
                </label>
        </div>

<div style="height:12px;"></div>
    <span id="d1">D1</span> - + - <span id="d2">D2</span>
        <button type="button" class="btn btn-block " id="save"><i class="fa fa-cloud-upload"></i> SAVE <span id="subtotal" ></span></button>

    <script>
    $(document).ready(function(){
        $('#rolls label').click(function() {
            var d1 = $(this).val();
            $(this).text(0);
            var d2 = $(this).val();
            var rollTotal = d1 + d2;
            $('#subtotal').text(rollTotal);
            /* how to submit these variables */
        });
    });
    </script>

该代码应该允许您选择 2 个骰子的结果，更新骰子字段以显示所选数字，将它们加在一起并在提交栏上显示总数，然后提交 3 个变量（die1、die2、和 rollTotal) 当提交被推送时。当我无法更新字段时，我似乎无法让它工作并停止。

【问题讨论】：

标签： jquery forms twitter-bootstrap button radio

【解决方案1】：

link to a jsfiddle

        $(document).ready(function(){
        $('#die1 .btn').click(function() {
            var d1 = $(this).text();
            $('#d1').text(d1);
        });
        $('#die2 .btn').click(function() {
            var d2 = $(this).text();
            $('#d2').text(d2);
        });
            var rollTotal = $('#d1') +$('#d2');
            $('#subtotal').text(rollTotal);
            /* how to submit these variables */
    });

更新了 2 个字段，但无法让它们添加和更新按钮 - 这也将我带到了下一个障碍，如何提交此信息

【讨论】：