Как отображать 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"));
}