强大的拨动开关，如何点击标签？

Question

目前，以下 HTML 代码仅在您单击输入时切换（即中心开关）。我需要在您单击标签时进行切换（即是或否）。如何做到这一点？

        <div>
            <span class="frm_off_label frm_switch_opt">No</span>
            <label class="frm_switch">
                   <input type="checkbox" name="2002" id="field_2002" value="Yes" checked="checked" 
                            data-off="No" data-sectionid="2002" data-frmval="Yes" placeholder="Yes">
                  <span class="frm_slider"></span>
              </label>
               <span class="frm_on_label frm_switch_opt">Yes</span>
         </div>

点击是或否的方法有哪些，和点击输入一样？

Answer 1

您可以使用 label 结合 for="element_id" 之类的 for="field_2002" 属性来实现它。

The for attribute specifies which form element a label is bound to.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <label for="field_2002" class="frm_off_label frm_switch_opt">No</label>
    <input type="checkbox" name="2002" id="field_2002" value="Yes" checked="checked" 
                    data-off="No" data-sectionid="2002" data-frmval="Yes" placeholder="Yes">
    <label for="field_2002" class="frm_on_label frm_switch_opt">Yes</label>               
</div>

Answer 2

您可以通过设置输入的选中状态来实现此目的 -

HTML

   <div>
        <span class="frm_off_label frm_switch_opt">No</span>
        <label class="frm_switch">
               <input type="checkbox" name="2002" id="field_2002" value="Yes" checked="checked" 
                        data-off="No" data-sectionid="2002" data-frmval="Yes" placeholder="Yes">
              <span class="frm_slider"></span>
          </label>
           <span class="frm_on_label frm_switch_opt">Yes</span>
     </div>

JS（jquery）

$('.frm_off_label').on('click', function(){
        $(this).next('label').find("input")[0].checked = false;
});


$('.frm_on_label').on('click', function(){
        $(this).prev('label').find("input")[0].checked = true;
});

CSS（选项）

.frm_switch_opt{
  cursor:pointer;
}

您可以在 jsfiddle 上看到它的实际效果

https://jsfiddle.net/guruling/tegmps9b/27/

强大的拨动开关，如何点击标签？

formidable toggle switch, how to click the label?

javascript

jquery

css

toggle

formidable