ラベルをシミュレートするボタンをクリックしてクリック

Question

私はボタンをクリックするとラベルのシミュレーションを助ける必要があります。 ラベルをボタンと同じサイズにしようとしました。ボタンをクリックするとチェックボックスがチェックされ、ボタンをクリックすると、ラベルをクリックしてシミュレートしようとしました。 問題は私のラベルのサイズが私のボタンの中に小さいので、ラベルの内側をクリックして確認する必要があります。私はどのように私のラベルと同じサイズを取得

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

は誰か私のジャバスクリプトを修正するかを教えてくださいすることができ、次の修正+スクリプトを使用してみました

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

：

が、これは私のhtmlファイルであります私のボタンとして。 事前に私の英語と感謝のために申し訳ありません:)

Answer 1

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

この

Answer 2

は、まず試してみてください：あなたは、ページ上でこれらのウィジェットを複数入れていますか？そうであれば、idは1つの要素に対してユニークでなければならないので、期待通りに動作しません。

2番目：ラベルがチェックボックスに（forプロパティを介して）結ばれているため、ラベルをクリックすると、JSがクリックを送信しているので何も起こらなかったかのように見え、ラベルは元に戻す" それ。ここをクリックして：https://jsfiddle.net/q1vour7v/をクリックしてラベルをクリックし、ラベルの端をクリックしてください。このバージョンで

は、ラベルはチェックボックスに縛られず、それが期待どおりに動作： https://jsfiddle.net/q1vour7v/1/