模拟标签点击按钮点击

please I need help simulating a label click when I click on the button. I tried to make the label the same size as the button so when I click on the button it will check my checkbox, then I tried using java script to simulate the label click when i click on the button. the problem is my label size is to small inside my button so I have to click inside the label to check.

this is my html file :

{%- block checkbox_widget -%}
<button class="btn-large waves-effect waves-light {% if checked %}disabled{% endif %}" style="margin-bottom:2%;">
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
    <label for="{{ id }}" class="white-text" style="font-size: 22px;">{{ label|trans({}, translation_domain) }}</label>
</button>
{%- endblock checkbox_widget -%}

{%- block radio_widget -%}
<button class="btn-large waves-effect waves-light {% if checked %}disabled{%endif %}" style="margin-bottom:2%;">
    <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
    <label for="{{ id }}" class="white-text" style="font-size: 22px;">{{ label|trans({}, translation_domain) }}</label>
</button>
{%- endblock radio_widget -%}

I tried using the following modification + script

{%- block checkbox_widget -%}

<button class="btn-large waves-effect waves-light {% if checked %}disabled{% endif %}" id="button" onclick="myFunction()" style="margin-bottom:2%;">
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
    <label for="{{ id }}" class="white-text" style="font-size: 22px;" id="check">{{ label|trans({}, translation_domain) }}</label>
</button>

<script>
    function myFunction() {
        buttn = document.getElementById("check");
        buttn.click();
    }
</script>
{%- endblock checkbox_widget -%}

can someone please correct my java script or tell me how the get my label the same size as my button. Sorry for my english and thanks in advance :)

   {%- block checkbox_widget -%}

      <button class="btn-large waves-effect waves-light {% if checked %}disabled{% endif %}" id="button" onclick="myFunction()" style="margin-bottom:2%;"></button>
       <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
      <label for="{{ id }}" class="white-text" style="font-size: 22px;" id="check">{{ label|trans({}, translation_domain) }}</label>


  <script>
  function myFunction() {
    buttn = document.getElementById("check");
    buttn.click();
  }
 </script>
    {%- endblock checkbox_widget -%} 

Try this

First: are you putting more than one of these widgets on the page? If so, it won't work the way you expect since id should be unique to a single element.

Secondly: Since your label is tied to the checkbox (via the for property), if you click the label, it will seem as if nothing has happened, as the JS is sending a click, then the label is "undoing" it. See here: https://jsfiddle.net/q1vour7v/ and click on the label, then click on the edges away from the label.

In this version, the label is not tied to the checkbox, and it works as expected: https://jsfiddle.net/q1vour7v/1/