Question

这是我尝试做的HTML和JavaScript。

我希望在选择单选按钮后从选择选项中获取值。计算此选项以选择选项，然后在选择选项值更改时调用if语句中的函数：

<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio1" name="chbox" value="option1">
        <label for="radio1"> Section A (Preferred)
            <br/><span>Adult(12y +) $35.00<br/>Children(5-11y) $18.00</span> </label>
    </div>
    <div style="display:none;" id="ch1">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="a1" onchange="totalPrice()">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="a2" onchange="totalPrice()">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio2" name="chbox" value="option1">
        <label for="radio2"> Section B (Open, Middle)
            <br/><span>Adult(12y +) $25.00<br/>Children(5-11y) $15.00</span> </label>
    </div>
    <div style="display:none;" id="ch2">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="b1">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="b2">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio3" name="chbox" value="option1">
        <label for="radio3">Section C (Open, Side)
            <br/><span>Adult(12y +) $18.00<br/>Children(5-11y) $10.00</span> </label>
    </div>
    <div style="display:none;" id="ch3">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="c1">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="c2">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio1" name="chbox" value="option1">
        <label for="radio1"> Section A (Preferred)
            <br/><span>Adult(12y +) $35.00<br/>Children(5-11y) $18.00</span> </label>
    </div>
    <div style="display:none;" id="ch1">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="a1" onchange="totalPrice()">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="a2" onchange="totalPrice()">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio2" name="chbox" value="option1">
        <label for="radio2"> Section B (Open, Middle)
            <br/><span>Adult(12y +) $25.00<br/>Children(5-11y) $15.00</span> </label>
    </div>
    <div style="display:none;" id="ch2">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="b1">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="b2">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio3" name="chbox" value="option1">
        <label for="radio3">Section C (Open, Side)
            <br/><span>Adult(12y +) $18.00<br/>Children(5-11y) $10.00</span> </label>
    </div>
    <div style="display:none;" id="ch3">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="c1">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="c2">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
</div>

和JavaScript代码：

$(document).click(function() {
    var check1 = document.getElementById("radio1");
    var check2 = document.getElementById("radio2");
    var check3 = document.getElementById("radio3");
    if (check1.checked) {
        $("#ch1").fadeIn();

        function totalPrice() {
            var a1 = document.getElementById("a1").value | 0;
            var a2 = document.getElementById("a2").value | 0;
            var total = 0;
            total = (a1 * 18) + (a2 * 35);
            document.getElementById("adCost").value = total;
            document.getElementById("total").value = total;

        }

    } else {
        $("#ch1").fadeOut();
    }
    if (check2.checked) {
        $("#ch2").fadeIn();
    } else {
        $("#ch2").fadeOut();
    }
    if (check3.checked) {
        $("#ch3").fadeIn();
    } else {
        $("#ch3").fadeOut();
    }
});

Answer 1

这不是一个好习惯。您可以错过可以调用此功能的方案。在这种情况下，该功能将不可用（未定义错误）。将函数保留在条件语句之外以避免这些错误。

我想知道我们可以在（if else）语句中创建函数吗？

1 个答案: