在Django中使用jQuery实现多选框值同步到文本域

核心错误：拼写错误导致代码完全不执行 #

你的jQuery代码里把document拼写成了documnet（少了一个字母'e'），这会让$(documnet).ready()函数彻底失效，自然无法触发复选框的状态同步逻辑，这是导致功能失效的关键原因。

除此之外，还有几个细节问题需要修正：

• HTML中多个元素使用了重复ID（比如id="medical"、id="flexCheckDefault"），ID在页面中必须唯一，虽然不直接影响同步功能，但属于语法错误，还可能导致标签与复选框的关联失效。
• 使用click事件监听复选框状态不如change事件合适，change能覆盖键盘操作（比如空格键切换复选框）等所有状态变化场景。
• 原代码中，当没有选中任何复选框时，text.substring(0, text.length-1)会因为text.length-1 = -1报错，需要优化字符串处理逻辑。

修正后的完整代码 #

HTML部分（修复重复ID问题）

<div class="row">
    <h3 class="mb-3">Have you Suffered from any of the following conditions?</h3>
    <div class="form-check col-3">
        <input class="chkcmedical" name="medical" id="medical-asthma"
            type="checkbox" value="Asthma"
            style="margin-left: -12px; margin-right: 10px;">
        <label class="form-check-label" for="medical-asthma">
            Asthma
        </label>
    </div>
    <div class="form-check col-3">
        <input class="chkcmedical" name="medical" id="medical-heart"
            type="checkbox" value="Heart Disease">
        <label class="form-check-label" for="medical-heart">
            Heart Disease
        </label>
    </div>
    <div class="form-check col-3">
        <input class="chkcmedical" type="checkbox" value="Diabetes"
            id="medical-diabetes">
        <label class="form-check-label" for="medical-diabetes">
            Diabetes
        </label>
    </div>
</div>

<div class="form-group p-5 pb-2">
    <label for="exampleFormControlTextarea1">Any other conditions, operations or hospital admission details.<span
            class="text-danger">*</span></label>
    <textarea class="form-control mt-3" id="medicalvalue"
        rows="3"></textarea>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery部分（修复拼写、事件类型与空值逻辑）

$(document).ready(function() {
    $('.chkcmedical').on('change', function() {
        var selectedValues = [];
        // 收集所有选中的复选框值
        $('.chkcmedical:checked').each(function() {
            selectedValues.push($(this).val());
        });
        // 用逗号拼接数组，无选中项时自动设为空字符串
        $('#medicalvalue').val(selectedValues.join(','));
    });
});

$(".demo").click(function(){
     $(this).hide(200);
});

关键改进说明 #

1. 修正拼写错误：把documnet改为document，确保DOM就绪函数正常执行。
2. 替换事件类型：用change事件替代click，兼容所有复选框状态切换方式。
3. 优化值收集逻辑：通过数组push收集选中值，再用join(',')拼接，既避免了手动处理末尾逗号的麻烦，又自然解决了无选中项时的报错问题。
4. 修复重复ID：给每个复选框和对应标签设置唯一ID，保证HTML语法合规，同时确保标签与复选框的关联正确。

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