强大的拨动开关,如何点击标签?
formidable toggle switch, how to click the label?
目前,以下 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>
点击是或否的方法有哪些,和点击输入一样?
您可以使用 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>
您可以通过设置输入的选中状态来实现此目的 -
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/
目前,以下 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>
点击是或否的方法有哪些,和点击输入一样?
您可以使用 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>
您可以通过设置输入的选中状态来实现此目的 -
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/