时间戳

首页 > 解决方案 > 强大的拨动开关，如何点击标签？

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

问题描述

目前，以下 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>

有什么方法可以使单击是或否，与单击输入做同样的事情？

标签： javascriptjquerycsstoggleformidable

解决方案

您可以通过设置输入的检查状态来实现这一点 -

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/

推荐阅读