如何用jQuery在弹窗中显示复选框、下拉框、开关的选中文本值？

没问题，我帮你搞定这个表单提交后正确显示所有内容的需求——包括复选框的选中文本和下拉框的选项文本，而不是只显示ON或者序号。下面是具体的实现方案，我会给你详细拆解每一部分：

完整代码示例（含HTML结构与jQuery逻辑） #

<body>
  <div data-role="page1">
    <div data-role="header">
      <h2>Registration Form</h2>
    </div>
    <div data-role="main" class="ui-content">
      <form id="registrationForm">
        <!-- 普通文本输入 -->
        <div>
          <label for="username">用户名:</label>
          <input type="text" id="username" name="username">
        </div>
        <!-- 复选框组 -->
        <div>
          <label>兴趣爱好:</label>
          <input type="checkbox" name="hobbies" value="reading" id="hobby1">
          <label for="hobby1">阅读</label>
          <input type="checkbox" name="hobbies" value="coding" id="hobby2">
          <label for="hobby2">编程</label>
          <input type="checkbox" name="hobbies" value="travel" id="hobby3">
          <label for="hobby3">旅行</label>
        </div>
        <!-- 下拉框 -->
        <div>
          <label for="occupation">职业:</label>
          <select id="occupation" name="occupation">
            <option value="1">学生</option>
            <option value="2">程序员</option>
            <option value="3">设计师</option>
          </select>
        </div>
        <!-- 提交按钮 -->
        <button type="submit">提交</button>
      </form>
    </div>
  </div>

  <!-- 引入jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#registrationForm').submit(function(e) {
        // 阻止表单默认提交行为，避免页面刷新
        e.preventDefault();
        
        let formData = {};
        
        // 处理普通文本输入控件（如文本框、邮箱框等）
        $('input[type="text"], input[type="email"], input[type="password"]').each(function() {
          formData[$(this).attr('name')] = $(this).val();
        });
        
        // 处理复选框：收集所有选中项的标签文本
        let selectedHobbies = [];
        $('input[name="hobbies"]:checked').each(function() {
          // 获取当前复选框对应的标签文本
          let labelText = $(this).next('label').text();
          selectedHobbies.push(labelText);
        });
        formData['hobbies'] = selectedHobbies.join(', ');
        
        // 处理下拉框：获取选中选项的显示文本（而非value值）
        let selectedOccupationText = $('#occupation option:selected').text();
        formData['occupation'] = selectedOccupationText;
        
        // 拼接成易读的文本内容
        let displayContent = '';
        $.each(formData, function(fieldName, fieldValue) {
          displayContent += `${fieldName}: ${fieldValue}\n`;
        });
        
        // 弹窗显示所有内容
        alert(displayContent);
      });
    });
  </script>
</body>

关键逻辑拆解 #

• 阻止默认提交：通过e.preventDefault()拦截表单的默认刷新提交行为，这样我们可以完全自定义数据处理逻辑。
• 普通控件处理：遍历所有单值输入控件，直接将name作为键、输入值作为值存入对象。
• 复选框处理：筛选出选中的复选框，通过next('label')定位到对应的标签元素，提取文本内容并收集，最后用逗号分隔成字符串。
• 下拉框处理：通过option:selected选中当前激活的选项，调用text()方法获取其显示文本，而非默认的val()拿到的序号值。
• 弹窗展示：将所有字段的键值对拼接成换行分隔的字符串，用alert()直观展示。

额外优化建议 #

如果你的表单结构更复杂（比如复选框和标签不相邻），可以用以下方式精准匹配复选框对应的标签：

$('input[name="hobbies"]:checked').each(function() {
  let checkboxId = $(this).attr('id');
  let labelText = $(`label[for="${checkboxId}"]`).text();
  selectedHobbies.push(labelText);
});

如果有多个下拉框，可以把下拉框处理逻辑通用化，无需逐个写选择器：

$('select').each(function() {
  let selectName = $(this).attr('name');
  let selectedText = $(this).find('option:selected').text();
  formData[selectName] = selectedText;
});

内容的提问来源于stack exchange，提问作者Nitin