模拟标签点击按钮点击

Question

请我需要帮助模拟标签点击时，我点击的按钮。我尝试使标签与按钮的大小相同，这样当我点击按钮时，它将选中我的复选框，然后我尝试使用java脚本来模拟当我点击按钮时的标签点击。问题是我的标签尺寸在我的按钮里面太小了，所以我必须在标签里面点击来检查。

这是我的html文件：

{%- 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 -%}

我尝试使用下面的修改+脚本

{%- 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 -%}

有人可以纠正我的java脚本或告诉我如何让我的标签与我的按钮一样大小。对我的英语表示抱歉，并提前表示感谢:)