如何用JavaScript结合HTML实现复选框选中/取消时更新页面内容

我正在学习HTML，如今开始接触JavaScript，已有初步尝试但陷入困惑。我需要实现：当用户勾选复选框时，将对应歌曲名称及价格显示在页面右侧；取消勾选时，移除该内容。

修改后的完整代码 #

HTML 部分

<div class="chosenSongs">
    <label>已选歌曲：</label>
    <div class="selectedSongsContainer"></div>
</div>

<div class="price">
    <label>总价：<span id="totalPrice">0 SEK</span></label>
</div>

<fieldset class="checkbox">
    <div class="title">Ringnes-Ronny</div>
    <div class="boxContainer">
        <label><input type="checkbox" value="Polisen|59" onclick="toggleSong(this)">Polisen<span class="time">59 SEK</span></label>
        <label><input type="checkbox" value="Valhalla|39" onclick="toggleSong(this)">Valhalla<span class="time">39 SEK</span></label>
        <label><input type="checkbox" value="Raggare på stureplan|49" onclick="toggleSong(this)">Raggare på stureplan<span class="time">49 SEK</span></label>
        <label><input type="checkbox" value="Monster|39" onclick="toggleSong(this)">Monster<span class="time">39 SEK</span></label>
    </div>
    <div class="title">Miss Li</div>
    <div class="boxContainer">
        <label><input type="checkbox" value="Instruktionsboken|39" onclick="toggleSong(this)">Instruktionsboken<span class="time">39 SEK</span></label>
        <label><input type="checkbox" value="Komplicerad|49" onclick="toggleSong(this)">Komplicerad<span class="time">49 SEK</span></label>
        <label><input type="checkbox" disabled>Starkare<span class="time">(无法订购)</span></label>
    </div>

    <div class="title">Avicii</div>
    <div class="boxContainer">
        <label><input type="checkbox" value="Wake Me Up|59" onclick="toggleSong(this)">Wake Me Up<span class="time">59 SEK</span></label>
        <label><input type="checkbox" value="Hey Brother|49" onclick="toggleSong(this)">Hey Brother<span class="time">49 SEK</span></label>
        <label><input type="checkbox" disabled>Waiting For Love<span class="time">(无法订购)</span></label>
        <label><input type="checkbox" value="You Make Me|29" onclick="toggleSong(this)">You Make Me<span class="time">29 SEK</span></label>
        <label><input type="checkbox" value="Levels|49" onclick="toggleSong(this)">Levels<span class="time">49 SEK</span></label>
    </div>

    <div>选择媒体：</div>
    <div class="boxContainer">
        <input type="radio" name="media"> Spotify
        <input type="radio" name="media"> YouTube
        <input type="radio" name="media"> Apple Music
    </div>
</fieldset>

JavaScript 部分

function toggleSong(boxElement) {
    const [songName, priceStr] = boxElement.value.split('|');
    const price = parseInt(priceStr);
    const container = document.querySelector('.selectedSongsContainer');
    const totalPriceEl = document.getElementById('totalPrice');
    let total = parseInt(totalPriceEl.textContent);

    if (boxElement.checked) {
        // 创建歌曲元素并添加到容器
        const songEl = document.createElement('div');
        songEl.className = 'oneSong';
        songEl.dataset.song = songName;
        songEl.textContent = `${songName} - ${price} SEK`;
        container.appendChild(songEl);
        // 更新总价
        total += price;
    } else {
        // 定位并移除对应歌曲元素
        const songEl = container.querySelector(`[data-song="${songName}"]`);
        if (songEl) {
            songEl.remove();
            // 更新总价
            total -= price;
        }
    }
    // 渲染最新总价
    totalPriceEl.textContent = `${total} SEK`;
}

关键修改说明 #

1. 修复原代码错误：原JS中cleaned = boxElement.value.indexOf(0, i)是错误用法，改为用split('|')拆分歌曲名和价格，逻辑更清晰可靠。
2. 统一复选框数据格式：给所有可勾选的复选框设置"歌曲名|价格"的value，方便后续提取数据。
3. 实现双向状态控制：通过boxElement.checked判断勾选状态，勾选时创建元素，取消时通过data-song属性精准定位并移除对应元素。
4. 增加总价实时计算：同步更新选中歌曲的总价，提升页面交互完整性。
5. 优化DOM操作：用createElement和remove替代innerHTML拼接，避免重复渲染和潜在风险，性能更优。
6. 禁用不可订购选项：给无法订购的歌曲复选框添加disabled属性，避免用户误操作。

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