选中复选框时如何显示Div

Question

我想在选中复选框时显示隐藏的div。当前，选中该复选框时，div保持隐藏状态。也许div的嵌套结构引起了问题？

page.html

                <div class="field">
                    <label class="label">Opportunity Information:</label>
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input type="checkbox" name="ware_type" id="ware_type" onchange="showHiddenField()">Hardware/Software:</a>
                            </label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="field">
                            <input class="input" name="estimate_id" id="estimate_id" type="text" placeholder="Estimate ID" style="display: none;">
                        </div>
                    </div>
                </div>

script.js

    function showHiddenField(currentObject) {
        var inputDiv = $(currentObject).parent().next();
        if ($(currentObject).is(":checked")) {
            $(inputDiv).toggle('show');
        }
        else {
            $(inputDiv).hide();
        }
    }

Answer 1

您可以更改

<input type="checkbox" name="ware_type" id="ware_type" onchange="showHiddenField()">Hardware/Software:</a>

至：

<input type="checkbox" name="ware_type" id="ware_type" onchange="showHiddenField(this,'#estimate_id')">Hardware/Software:

和您的javascript（有jquery）

function showHiddenField(e,t) {
  $(t).toggle($(e).is(":checked"));
}