jquery单选按钮，加上另外两个小问题

Question

我的JSfiddle让它变得简单 - 编辑： 现在只需要在标签3中工作的方程式帮助，其他一切都有效！

http://jsfiddle.net/7q8nkvwc/

最后，最后一个问题是我为BMI做的等式（tab3）不起作用。 BMI结果应该几乎总是出现在15和40之间。我已经尝试了几种不同的写作方式，但无济于事，它从未提出接近15-40的任何东西。只是好奇我如何重写它才能发挥作用。

感谢您在此时间和耐心，非常感谢！ 的 HTML：     

<h2>Health Calculator</h2>

<!-- tabs setup for page -->
<div id="tabs">
    <ul>
        <li>
            <a href="#tabs-1">First</a>
        </li>
        <li>
            <a href="#tabs-2">Second</a>
        </li>
        <li>
            <a href="#tabs-3">Third</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p><strong>Exercise</strong></p>
        <!-- Form for Tab one -->
        <form>
            <p><strong>Activity factor</strong></p>
            <!-- Setup Radio buttons -->
            <p>
                <input type="radio" name="activity" id="sed" value="1.2"/>
                <label for="sed" id="sedLabel">Sedentary = BMR X 1.2 (little or no exercise, desk job)</label>
            </p>
            <p>
                <input type="radio" name="activity" id="lit" value="1.375"/>
                <label for="lit" id="litLabel">Lightly active = BMR X 1.375 (light exercise/sports 1-3 days/wk)</label>
            </p>
            <p>
                <input type="radio" name="activity" id="mod" value="1.55"/>
                <label for="mod" id="modLabel">Mod. active = BMR X 1.55 (moderate exercise/sports 3-5 days/wk)</label>
            </p>
            <p>
                <input type="radio" name="activity" id="very" value="1.725"/>
                <label for="very" id="veryLabel">Very active = BMR X 1.725 (hard exercise/sports 6-7 days/wk)</label>
            </p>
            <p>
                <input type="radio" name="activity" id="ext" value="1.9"/>
                <label for="ext" id="extLabel">Extr. Active = BMR X 1.9 (hard daily exercise/sports &amp; physical job or 2 X day training, marathon, football camp, contest, etc.)</label>
            </p>
        </form>
    </div>
    <div id="tabs-2">
        <!-- Div and form setup for tab 2 -->
        <p>Diet - Caloric maintenance</p>
        <!-- The equation is shown for reference -->
        <p>Men: Base result = 66 + (13.7 X wt in kg) + (5 X ht in cm) - (6.8 X age in years)</p>
        <p>The base result is then modified by the previously selected activity level to give you your average daily calorie expenditure</p>
        <!--Form for weight, height, and age of Caloric Maintenance calc.-->
        <!-- Form to all text entry for values -->
        <form>
            <label for="txtWeight">Weight:</label>
            <input type="text" class="txtInput" id="txtWeight" value="0"/>
            <label for="txtHeight">Height:</label>
            <input type="text" class="txtInput" id="txtHeight" value="0"/>
            <label for="txtAge">Age:</label>
            <input type="text" class="txtInput" id="txtAge" value="0"/>
            <br/>
            <input type="button" id="btnCalc1" value="Calculate"/>
            <p id="result">Result</p>
        </form>
        <p>------------------------------------------</p>
        <!-- This is a conversion section since the above mention equation uses metric system-->
        <br/>
        <form>
            <label for="txtWeight">Lbs to Kg::</label>
            <input type="text" class="txtInput" id="txtLbs" value="0"/>
            <br/>
            <input type="button" id="btnCalc2" value="Calculate"/>
            <p id="result2">Result</p>
            <label for="txtHeight">Inches to Cm:</label>
            <input type="text" class="txtInput" id="txtInch" value="0"/>
            <br/>
            <input type="button" id="btnCalc3" value="Calculate"/>
            <p id="result3">Result</p>
        </form>
    </div>
    <!-- Div and form setup for Tab 3 -->
    <div id="tabs-3">
        <p>BMI Calculator</p>
        <!-- The equation is shown for reference -->
        <p>BMI = (Mass (lb)/height(in)^2) * 703</p>
        <!-- Form to all text entry for values -->
        <form>
            <label for="txtMass">Mass in Lbs:</label>
            <input type="text" class="txtInput" id="txtMass" value="0"/>
            <label for="txtHinch">Height in Inches:</label>
            <input type="text" class="txtInput" id="txtInput" value="0"/>
            <br/>
            <input type="button" id="btnCalc4" value="Calculate"/>
            <p id="result4">Result</p>
        </form>
    </div>
</div>

</body>

使用Javascript：

// JavaScript Document
$(function () {
    $('#tabs').tabs();

});

// Tab 2
$(function () {
    //Identify Variables
    var txtWeight, txtHeight, txtAge;
    // attach event listener to the toggle button's click event
    $('#btnCalc1').click(function () {
        var result = 66 + (13.7 * $('#txtWeight').val()) + (5 * $('#txtHeight').val()) - (6.8 * $('#txtAge').val());
        var activity = $('input[name="activity"]:checked').val() || 0;
        $('#result').html('Result: '+activity * result)
    });

});
// Still Tab 2, but second half
$(function () {
    //Identify Variables
    var txtInch, txtLbs;
    // attach event listener to the toggle button's click event
    $('#btnCalc2').click(function () {
        result2 = $('#txtLbs').val() * 0.45359237;
        //Output result
        $('#result2').html('Result: '+result2)
    });
    $('#btnCalc3').click(function () {
        result3 = $('#txtInch').val() * 2.54;
        //Output result
        $('#result3').html('Result: '+result3)
    });


});

//Tab 3 
$(function () {
    //Identify Variables
    var txtMass, txtHinch;
    // attach event listener to the toggle button's click event
    $('#btnCalc4').click(function () {
        result4 = ($('#txtMass').val() / ($('#txtHinch') * $('#txtHinch'))) * 703;
        $('#result4').html('Result: '+result4)

    });


});

Answer 1

您可以使用:checked-selector选择已选中的单选按钮。也可以使用.html来更改元素的内容。

所以

$(function () {
    $('#tabs').tabs();

});

// Tab 2
$(function () {
    //Identify Variables
    var txtWeight, txtHeight, txtAge;
    // attach event listener to the toggle button's click event
    $('#btnCalc1').click(function () {
        var result = 66 + (13.7 * $('#txtWeight').val()) + (5 * $('#txtHeight').val()) - (6.8 * $('#txtAge').val());
        var activity = $('input[name="activity"]:checked').val() || 0;
        $('#result').html('Result: ' + activity * result)
    });

});
// Still Tab 2, but second half
$(function () {
    //Identify Variables
    var txtInch, txtLbs;
    // attach event listener to the toggle button's click event
    $('#btnCalc2').click(function () {
        var result = $('#txtLbs').val() * 0.45359237;
        $('#result2').html('Result: ' + result)
    });
    $('#btnCalc3').click(function () {
        var result = $('#txtInch').val() * 2.54;
        $('#result3').html('Result: ' + result)
    });


});

//Tab 3 
$(function () {
    //Identify Variables
    var txtMass, txtHinch;
    // attach event listener to the toggle button's click event
    $('#btnCalc4').click(function () {
        var result = ($('#txtMass').val() / ($('#txtHinch') * $('#txtHinch'))) * 703;
        $('#result4').html('Result: ' + result)

    });


});

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<h2>Health Calculator</h2>

<!-- tabs setup for page -->
<div id="tabs">
    <ul>
        <li>
            <a href="#tabs-1">First</a>
        </li>
        <li>
            <a href="#tabs-2">Second</a>
        </li>
        <li>
            <a href="#tabs-3">Third</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p><strong>Exercise</strong></p>
        <!-- Form for Tab one -->
        <form>
            <p><strong>Activity factor</strong></p>
            <!-- Setup Radio buttons -->
            <p>
                <input type="radio" name="activity" id="sed" value="1.2"/>
                <label for="sed" id="sedLabel">Sedentary = BMR X 1.2 (little or no exercise, desk job)</label>
            </p>
            <p>
                <input type="radio" name="activity" id="lit" value="1.375"/>
                <label for="lit" id="litLabel">Lightly active = BMR X 1.375 (light exercise/sports 1-3 days/wk)</label>
            </p>
            <p>
                <input type="radio" name="activity" id="mod" value="1.55"/>
                <label for="mod" id="modLabel">Mod. active = BMR X 1.55 (moderate exercise/sports 3-5 days/wk)</label>
            </p>
            <p>
                <input type="radio" name="activity" id="very" value="1.725"/>
                <label for="very" id="veryLabel">Very active = BMR X 1.725 (hard exercise/sports 6-7 days/wk)</label>
            </p>
            <p>
                <input type="radio" name="activity" id="ext" value="1.9"/>
                <label for="ext" id="extLabel">Extr. Active = BMR X 1.9 (hard daily exercise/sports &amp; physical job or 2 X day training, marathon, football camp, contest, etc.)</label>
            </p>
        </form>
    </div>
    <div id="tabs-2">
        <!-- Div and form setup for tab 2 -->
        <p>Diet - Caloric maintenance</p>
        <!-- The equation is shown for reference -->
        <p>Men: Base result = 66 + (13.7 X wt in kg) + (5 X ht in cm) - (6.8 X age in years)</p>
        <p>The base result is then modified by the previously selected activity level to give you your average daily calorie expenditure</p>
        <!--Form for weight, height, and age of Caloric Maintenance calc.-->
        <!-- Form to all text entry for values -->
        <form>
            <label for="txtWeight">Weight:</label>
            <input type="text" class="txtInput" id="txtWeight" value="0"/>
            <label for="txtHeight">Height:</label>
            <input type="text" class="txtInput" id="txtHeight" value="0"/>
            <label for="txtAge">Age:</label>
            <input type="text" class="txtInput" id="txtAge" value="0"/>
            <br/>
            <input type="button" id="btnCalc1" value="Calculate"/>
            <p id="result">Result</p>
        </form>
        <p>------------------------------------------</p>
        <!-- This is a conversion section since the above mention equation uses metric system-->
        <br/>
        <form>
            <label for="txtWeight">Lbs to Kg::</label>
            <input type="text" class="txtInput" id="txtLbs" value="0"/>
            <br/>
            <input type="button" id="btnCalc2" value="Calculate"/>
            <p id="result2">Result</p>
            <label for="txtHeight">Inches to Cm:</label>
            <input type="text" class="txtInput" id="txtInch" value="0"/>
            <br/>
            <input type="button" id="btnCalc3" value="Calculate"/>
            <p id="result3">Result</p>
        </form>
    </div>
    <!-- Div and form setup for Tab 3 -->
    <div id="tabs-3">
        <p>BMI Calculator</p>
        <!-- The equation is shown for reference -->
        <p>BMI = (Mass (lb)/height(in)^2) * 703</p>
        <!-- Form to all text entry for values -->
        <form>
            <label for="txtMass">Mass in Lbs:</label>
            <input type="text" class="txtInput" id="txtMass" value="0"/>
            <label for="txtHinch">Height in Inches:</label>
            <input type="text" class="txtInput" id="txtInput" value="0"/>
            <br/>
            <input type="button" id="btnCalc4" value="Calculate"/>
            <p id="result4">Result</p>
        </form>
    </div>
</div>