fix: 选中子标签选项时同步勾选父标签复选框,并支持再次点击取消选择

- 将 radio 的 onchange 改为 onclick,支持点击已选中的 radio 触发取消
- selectTagOption 中增加父复选框 DOM 同步逻辑
- 再次点击已选中的 radio 时取消选择并重建 DOM 状态
This commit is contained in:
2026-06-26 17:14:17 +08:00
parent 1bb3978c9a
commit b779099bcf
+13 -2
View File
@@ -214,7 +214,7 @@
const checked = selectedTags[tag.id] !== undefined; const checked = selectedTags[tag.id] !== undefined;
const optionsHtml = tag.options.map(o => ` const optionsHtml = tag.options.map(o => `
<label class="radio-label"> <label class="radio-label">
<input type="radio" name="tag_${tag.id}" value="${o.id}" ${selectedTags[tag.id] === o.id ? 'checked' : ''} onchange="selectTagOption(${tag.id}, ${o.id})"> <input type="radio" name="tag_${tag.id}" value="${o.id}" ${selectedTags[tag.id] === o.id ? 'checked' : ''} onclick="selectTagOption(${tag.id}, ${o.id})">
<span class="text-sm">${escapeHtml(o.label)}</span> <span class="text-sm">${escapeHtml(o.label)}</span>
</label> </label>
`).join(''); `).join('');
@@ -255,7 +255,18 @@
} }
function selectTagOption(tagId, optionId) { function selectTagOption(tagId, optionId) {
selectedTags[tagId] = optionId; if (selectedTags[tagId] === optionId) {
// 再次点击已选中的选项 → 取消选择(需要 renderTags 重建 DOM 以取消 radio 的 checked 状态)
delete selectedTags[tagId];
renderTags();
} else {
selectedTags[tagId] = optionId;
// 同步勾选父标签复选框
const checkbox = document.querySelector(`#tag-options-${tagId}`)
?.closest('.mb-2')
?.querySelector('input[type="checkbox"]');
if (checkbox) checkbox.checked = true;
}
updatePreview(); updatePreview();
} }