html 显示多个选中复选框的值[duplicate]

9avjhtql  于 2022-11-27  发布在  其他
关注(0)|答案(3)|浏览(125)

此问题在此处已有答案

Getting multiple values from checked checkboxes Javascript(3个答案)
昨天关门了。
我试图在一个单独的DIV中显示多个复选框的值,以便向用户显示复选框的结果。但是如果用户取消选中复选框,我也希望删除该值。这是我目前拥有的代码,但一次只能显示/隐藏一个值。例如,如果我单击复选框a、b和c,它将显示所有值。但是如果我取消选中,它们将隐藏。谢谢

<input onchange="selectArr(this)" type="checkbox" name="accessory" value="a"/>
<input onchange="selectArr(this)" type="checkbox" name="accessory" value="b"/>
<input onchange="selectArr(this)" type="checkbox" name="accessory" value="c"/>

<div id="acc"></div>
    
function selectAcc(cb) {
    var x = cb.checked ? cb.value : '';
    document.getElementById("acc").innerHTML = x;
}
dldeef67

dldeef672#

希望这对你有用。

function selectAcc(cb) {
        // get previous div value
        var previousValue = document.getElementById("acc").getAttribute('value');
        var newValue = previousValue;
        //store the new clicked value
        var value = cb.value;
        // if the new value is checked and the value is not present in the div add it to the div string value
        if (cb.checked && !previousValue.includes(value)) newValue+=value ;
        // else remove the value from div string value
        else previousValue = newValue.replace(value, '');
        // update new value in div
        document.getElementById("acc").innerHTML = newValue;
    }
rggaifut

rggaifut3#

试着像这样

var checked = []

function selectAcc(cb) {
    if(cb.checked){
        checked.push(cb.value)
    } else {
        var index = checked.indexOf(cb.value)
        checked.splice(index, 1)
}
    document.getElementById("acc").innerHTML = checked.join(' ');
}

相关问题