грозный тумблер, как нажать на ярлык?

Question

В настоящее время приведенный ниже код HTML переключается только при нажатии на вход (ie. Центральный переключатель). Мне нужно, чтобы переключение происходило, когда вы нажимаете на ярлыки (ie. Да или Нет). Как это сделать?

        <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

Этого можно добиться, установив проверенный статус ввода -

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 (optioanl)

.frm_switch_opt{
  cursor:pointer;
}

Вы можете увидеть это в действии на jsfiddle

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

Answer 2

Вы можете использовать label в сочетании с атрибутом for="element_id" подобно for="field_2002" для его достижения.

Атрибут for указывает, к какому элементу формы привязана метка .

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