Question

我已经制作了自己的选择下拉列表，其中有下拉列表：

---Select----
-option1-
-option2-
-option3-

对于用户而言，显示了选择，但是当用户点击它时会显示选项（如普通表格的选择）。选项是复选框。现在我想要做的是在用户点击它们并将其传递给“select”时获取这些复选框的标签。最重要的是，如果用户取消选中所有复选框，如何将文本重置为“选择”？

该自定义选择的JS就是这样：

$('.custom-select').click(function() {
$(this).children('.custom-select-drop').toggleClass('not-showed');
)};

当用户选中其中一个复选框时，如果该信息有任何帮助，则复选框将被选中。

编辑： 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）并将其传递给内部..替换Something文本。如果用户取消选中复选框，则selectTitle文本将更改为默认的Something。

Answer 1

如果我正确理解了该任务，此解决方案可能会有所帮助

示例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 );
            }
        }
    });
});

如何使用jQuery获取复选框标签文本

1 个答案: