fix: 选中子标签选项时同步勾选父标签复选框,并支持再次点击取消选择
- 将 radio 的 onchange 改为 onclick,支持点击已选中的 radio 触发取消 - selectTagOption 中增加父复选框 DOM 同步逻辑 - 再次点击已选中的 radio 时取消选择并重建 DOM 状态
This commit is contained in:
+13
-2
@@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user