How to be able to click on input that is inside another div

Question

I am using the following code:

 <div class="filled dropdown">
            <form>
                <div class="multiple-wrapper dropdown">
                    <input type='checkbox' id='goption14' name="Questions" onclick='addQuestion();' value='14'><label for="goption14" class="checkbox">Able to handle short-term expenses?</label>
                    <div class="question-boxes inner-wrapper">
                        <input type="checkbox" id="checkbox1"><label for="checkbox1">Acid Ratio</label>
                        <input type="checkbox" id="checkbox2"><label for="checkbox2">Cash Ratio</label>
                        <input type="checkbox" id="checkbox3"><label for="checkbox3">Current Ratio</label>
                        <input type="checkbox" id="checkbox4"><label for="checkbox4">Net Working Capital</label>
                    </div>
                </div>
            </form>
</div>

This is what it looks like when I click the Able to handle short-term expenses label:

Now what I'm trying to do is call the addQuestion function when I click on this label.

However, since I have everything wrapped in: <div class="multiple-wrapper dropdown">
it doesn't seem to be able to reach the: <input type='checkbox' id='goption14' name="Questions" onclick='addQuestion();' ... <input type='checkbox' id='goption14' name="Questions" onclick='addQuestion();' ...

And therefore it is not calling the addQuestion function which aims to increase the Questions counter and apply a border to the left of the Able to handle short-term expenses label.

Is there a way for me to still be able to get this dropdown menu and wrapper when clicking the Able to handle short-term expenses label, but also checking the checkbox: <input type='checkbox' id='goption14' name="Questions" onclick='addQuestion();' ... <input type='checkbox' id='goption14' name="Questions" onclick='addQuestion();' ...
and so calling its onclick method addQuestion ?

Answer 1

Since you are not showing the whole code, I suspect you are writing the addQuestion() function in a place that is not accessible in the global scope.

Meaning if you are using jQuery, your addQuestion() may be wrapped inside of a $(document).ready() , making the addQuestion() invisible to the global scope, where your <input onclick="addQuestion()"> is located.

Solution 1 (recommended)

Include document.getElementById('goption14').addEventListener('click', addQuestion) or jQuery('#goption14').on('click', addQuestion) within same scope of where your addQuestion() function is written.

Solution 2 (not recommended)

Include the following in your HTML

<script>
    function addQuestion(){
        /*
            your function
        */
    }
</script>

Solution 3 (least recommended)

Write the onclick event like this:

<input ... onclick="function addQuestion(){ ... }; addQuestion();" ... >

Answer 2

Issue resolved.

Added a click event for the outside div which finds the next input id and simulates as if I had clicked it myself.

  $('.multiple-wrapper.dropdown').click(function(){
            var id = $(this).find('input').attr('id');
            $('#'+id).click();
        });

Then it is calling the addQuestion() function properly, etc.