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

Question

目前，以下 HTML 代码仅在您单击输入(即中心开关)时进行切换。我需要在您单击标签时进行切换(即"is"或“否”)。如何实现这一点？

        <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>

有哪些方法可以让点击"is"或“否”，与点击输入做同样的事情？

Answer 1

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

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/