如何用jQuery将复选框选中值以JSON格式输出到控制台？

没问题！我帮你调整代码，让点击按钮后能输出结构化的JSON对象到控制台，而不是简单的字符串拼接。这样不仅更符合你的需求，后续如果要把数据传给后端或者做其他处理也更方便。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<h4>门类型:</h4>
<label><input class="derevo-app" type="radio" value="derevo" name="app"> 木质</label>
<label><input class="metal-app" type="radio" value="metal" name="app"> 金属</label>
<label><input class="pvh-app" type="radio" value="pvh" name="app"> PVC</label>
<label><input class="sklo-app" type="radio" value="sklo" name="app"> 玻璃</label>
<h4>产品:</h4>
<label><input class="zamky-app" type="checkbox" value="zamky" name="app"> 锁具</label>
<label><input class="cylindry-app" type="checkbox" value="cylindry" name="app"> 锁芯</label>
<label><input class="dostup-app" type="checkbox" value="dostup" name="app"> 门禁控制</label>
<label><input class="antipanic-app" type="checkbox" value="antipanic" name="app"> 防恐慌装置</label>
<label><input class="dovodchyk-app" type="checkbox" value="dovodchyk" name="app"> 闭门器</label>
<h4>解决方案:</h4>
<label><input class="elektronne-app" type="radio" value="elektronne" name="app-sol"> 电子型</label>
<label><input class="mexanichne-app" type="radio" value="mexanichne" name="app-sol"> 机械型</label>
<h4>摄像头:</h4>
<label><input class="vnutr-app" type="checkbox" value="vnutr" name="app"> 室内摄像头</label>
<label><input class="zovn-app" type="checkbox" value="zovn" name="app"> 室外摄像头</label>
<br>
<input type="button" value="继续">
</form>
<script>
jQuery(document).ready(function() {
    jQuery("input[type='button']").click(function() {
        // 初始化一个空对象，用来存储不同类别的选中值
        const selectedOptions = {
            doorMaterial: "",
            products: [],
            solution: "",
            cameras: []
        };

        // 获取门类型（单选）的值，未选中时返回空字符串
        selectedOptions.doorMaterial = jQuery("input[name='app']:radio:checked").val() || "";

        // 获取产品（复选框）的选中值数组
        jQuery.each(jQuery(".zamky-app, .cylindry-app, .dostup-app, .antipanic-app, .dovodchyk-app:checked"), function() {
            selectedOptions.products.push(jQuery(this).val());
        });

        // 获取解决方案（单选）的值，未选中时返回空字符串
        selectedOptions.solution = jQuery("input[name='app-sol']:checked").val() || "";

        // 获取摄像头（复选框）的选中值数组
        jQuery.each(jQuery(".vnutr-app, .zovn-app:checked"), function() {
            selectedOptions.cameras.push(jQuery(this).val());
        });

        // 将对象转为带缩进的JSON字符串，输出到控制台
        console.log(JSON.stringify(selectedOptions, null, 2));
    });
});
</script>

关键修改说明 #

1. 结构化存储：用对象selectedOptions替代原来的数组，把不同类别的选项分别存入对应属性，让数据结构更清晰易读。
2. 精准元素选择：因为你HTML里多个元素的name重复（比如门类型和产品的name都是app），所以通过class选择器精准区分产品和摄像头的复选框，避免数据混淆。
3. JSON格式化输出：用JSON.stringify(selectedOptions, null, 2)把对象转成带缩进的JSON字符串，控制台输出会更规整。
4. 兼容未选中场景：用|| ""处理单选未选中的情况，避免输出undefined。

举个例子，如果选中了「木质」门类型、「锁具」「锁芯」产品、「电子型」解决方案和「室外摄像头」，控制台会输出这样的JSON：

{
  "doorMaterial": "derevo",
  "products": [
    "zamky",
    "cylindry"
  ],
  "solution": "elektronne",
  "cameras": [
    "zovn"
  ]
}

内容的提问来源于stack exchange，提问作者Артем