jquery 连接多选赋值给文本框

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，可以通过选择器轻松地选择页面上的元素，并对其进行操作。

类型

在 jQuery 中，连接多选赋值给文本框的操作通常涉及以下几种类型：

单选按钮（Radio Buttons）
复选框（Checkboxes）

应用场景

这种操作常见于表单处理，例如在一个多选复选框组中选择多个选项，并将这些选项的值合并后显示在一个文本框中。

示例代码

假设我们有一个复选框组和一个文本框，用户选择多个复选框后，点击按钮将选中的值赋值给文本框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 多选赋值示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <input type="checkbox" name="options" value="Option1"> Option 1<br>
        <input type="checkbox" name="options" value="Option2"> Option 2<br>
        <input type="checkbox" name="options" value="Option3"> Option 3<br>
        <input type="checkbox" name="options" value="Option4"> Option 4<br>
        <button type="button" id="submitBtn">提交</button>
    </form>
    <input type="text" id="result" readonly>

    <script>
        $(document).ready(function() {
            $('#submitBtn').click(function() {
                var selectedValues = [];
                $('input[name="options"]:checked').each(function() {
                    selectedValues.push($(this).val());
                });
                $('#result').val(selectedValues.join(', '));
            });
        });
    </script>
</body>
</html>