Range Slider修改Checkbox PROP时触发对应功能的实现问题

问题：点击Checkbox时能正常控制.hotelsign元素的显示/隐藏，但通过Range Slider修改Checkbox的checked属性时，该功能无法触发。

原因 #

通过prop()方法直接修改Checkbox的状态属于程序式修改，不会自动触发change事件——change事件仅在用户手动交互（比如点击Checkbox）时才会触发。

解决方案 #

有两种可行的处理方式：

方式1：修改状态后手动触发change事件

在updateValue1函数中，每次用prop()修改Checkbox状态后，调用trigger('change')手动触发事件，让绑定的逻辑执行。

修改后的JavaScript代码：

document.querySelector('#play-button').addEventListener('click', () => {
    music.play();
});

const music = new Audio('https://tim-school.com/codepen/bells2/miss.mp3');
const seeker = document.querySelector('#rangeInput1');

music.addEventListener('timeupdate', () => {
    const percent = music.currentTime / music.duration * 100;
    seeker.value = percent;
    updateValue1();
});

seeker.addEventListener('input', (e) => {
    music.currentTime = e.target.value / 100 * music.duration;
});

function updateValue1() {
    var rangeInput1 = document.getElementById("rangeInput1").value
    const checkbox = $("#myform2 :checkbox");
    if (rangeInput1 == 0) {
        checkbox.prop("checked", true).trigger('change');
    }
    if (rangeInput1 == 20) {
        checkbox.prop("checked", false).trigger('change');
    }
    if (rangeInput1 == 40) {
        checkbox.prop("checked", true).trigger('change');
    }
    if (rangeInput1 == 60) {
        checkbox.prop("checked", false).trigger('change');
    }
    if (rangeInput1 == 80) {
        checkbox.prop("checked", true).trigger('change');
    }
    if (rangeInput1 == 100) {
        checkbox.prop("checked", false).trigger('change');
    }
}

$('#myform2 :checkbox').change(function () {
    if ($(this).is(':checked')) {
        $("#hotelsign").css({ 'display': 'none' });
    } else {
        $("#hotelsign").css({ 'display': 'block' });
    }
});

方式2：抽离逻辑为独立函数（更推荐）

把控制.hotelsign显示/隐藏的逻辑单独写成一个函数，不管是用户点击Checkbox，还是滑块修改状态，都直接调用这个函数。这种方式不依赖事件触发，逻辑更清晰。

修改后的JavaScript代码：

document.querySelector('#play-button').addEventListener('click', () => {
    music.play();
});

const music = new Audio('https://tim-school.com/codepen/bells2/miss.mp3');
const seeker = document.querySelector('#rangeInput1');

music.addEventListener('timeupdate', () => {
    const percent = music.currentTime / music.duration * 100;
    seeker.value = percent;
    updateValue1();
});

seeker.addEventListener('input', (e) => {
    music.currentTime = e.target.value / 100 * music.duration;
});

// 抽离显示/隐藏逻辑为独立函数
function toggleHotelSign(isChecked) {
    $("#hotelsign").css('display', isChecked ? 'none' : 'block');
}

function updateValue1() {
    var rangeInput1 = document.getElementById("rangeInput1").value
    const isChecked = [0,40,80].includes(parseInt(rangeInput1));
    $("#myform2 :checkbox").prop("checked", isChecked);
    // 直接调用逻辑函数
    toggleHotelSign(isChecked);
}

$('#myform2 :checkbox').change(function () {
    // 点击Checkbox时也调用同一个函数
    toggleHotelSign($(this).is(':checked'));
});

说明 #

第二种方式优化了updateValue1的判断逻辑，用数组包含判断替代多个if，代码更简洁；同时通过共享函数，避免了重复代码，也不需要依赖事件触发，稳定性更高。

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