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脚本或告诉我如何让我的标签与我的按钮大小相同。对不起我的英文，并提前感谢:)

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对于单个元素应该是唯一的。

其次：由于您的标签与复选框相关联（通过for属性），如果您单击标签，看起来好像什么也没发生，因为JS发送了一个点击，然后是标签正在“撤消”它。请参阅此处：https://jsfiddle.net/q1vour7v/并单击标签，然后单击远离标签的边缘。

在此版本中，标签未与复选框相关联，并且按预期工作：https://jsfiddle.net/q1vour7v/1/

模拟标签点击按钮点击

2 个答案: