如何使用jQuery获取复选框标签文本
我制作了自己的选择下拉列表,其中有复选框:如何使用jQuery获取复选框标签文本,jquery,html,css,checkbox,Jquery,Html,Css,Checkbox,我制作了自己的选择下拉列表,其中有复选框: ---Select---- -option1- -option2- -option3- 对于用户,仅显示Select,但当用户单击时,它会显示与普通表单的Select类似的选项。选项是复选框。现在我想做的是,当用户单击这些复选框时,获取它们的标签,并将其传递给该选择框。另外,最大的问题是,如果用户取消选中所有复选框,如何将文本重置回Select 该自定义选择的JS如下所示: $('.custom-select').click(function() {
---Select----
-option1-
-option2-
-option3-
对于用户,仅显示Select,但当用户单击时,它会显示与普通表单的Select类似的选项。选项是复选框。现在我想做的是,当用户单击这些复选框时,获取它们的标签,并将其传递给该选择框。另外,最大的问题是,如果用户取消选中所有复选框,如何将文本重置回Select
该自定义选择的JS如下所示:
$('.custom-select').click(function() {
$(this).children('.custom-select-drop').toggleClass('not-showed');
)};
当用户选中其中一个复选框时,如果该信息有任何帮助,则复选框GetSelected class
编辑:
html:
<div class="custom-select">
<span class="selectTitle">Something</span>
<div class="custom-select-drop not-showed">
<label for="check1">
<input type="checkbox" class="ch" id="check1" />Check1
</label>
<label for="check2">
<input type="checkbox" class="ch" id="check2" />Check2
</label>
<label for="check3">
<input type="checkbox" class="ch" id="check3" />Check3
</label>
现在让我们假设用户单击复选框id check2和check3。。我想得到那些标签文本Check2和Check3并将其传递给内部。。替换文本。如果用户取消选中复选框,selectTitle文本将更改为默认值。如果我正确理解任务,此解决方案可能会有所帮助 示例HTML:
<select id="select_element">
<option id="default"> - select - </option>
</select>
<div>
<label><input type="checkbox" class="checkboxes" value="someval1">Box value 1</label><br>
<label><input type="checkbox" class="checkboxes" value="someval2">Box value 2</label><br>
<label><input type="checkbox" class="checkboxes" value="someval3">Box value 3</label><br>
<label><input type="checkbox" class="checkboxes" value="someval4">Box value 4</label><br>
</div>
复选框操作代码:
$(document).ready( function() {
var default_opt = false;
$(".checkboxes").change( function() {
var opt_id = 'opt' + $(this).val();
if( $(this).is(":checked") ) {
// Saving default value
if( !default_opt ) {
default_opt = $( '#select_element > #default').clone();
$( '#select_element > #default').remove()
}
var text = $(this).parent().text().trim(); ///< Getting trimmed label's text
var item = $('<option></option>').attr({ id: opt_id, value: text }).text( text ); ///< Creating new <option> element with that text
$('#select_element').append( item ); ///< Puting this <option> to the <select>
}
else {
$( '#select_element > #' + opt_id ).remove();
// Restoring default value ( if no checkboxes are selected
if( ! $( '#select_element' ).children().length ) {
$( '#select_element' ).append( default_opt );
}
}
});
});
你能发布你的全部代码吗?我不知道你的标记是怎样的,但是如果你有,你可以通过for属性选择匹配的标签…我不明白这一点:当用户单击这些复选框时,获取它们的标签并将其传递给该选择。你将标签传递给select是什么意思?请稍微编辑一下我的问题。希望现在更清楚了。这几乎是正确的。如果选中多个复选框,我需要显示多个标签。