Question

我有一个复选框。如果我选中复选框，那么我需要显示一个特定的div，如果它未被选中，则显示另一个div。有人可以帮我解决这个问题。

我已经研究过，我只找到了如果选中复选框然后显示div或者隐藏div的示例。但是我的问题有点不同。如果使用复选框无法实现这一点，并且可以使用其他字段，请告知我们。提前谢谢。

Answer 1

document.getElementById('id_of_my_checkbox').onclick = function () {
  document.getElementById('id_of_div_to_show_when_checked').style.display = (this.checked) ? 'block' : 'none';
  document.getElementById('id_of_div_to_hide_when_checked').style.display = (this.checked) ? 'none' : 'block';
};

Answer 2

如果您发布HTML，那就更好了。

否则是通用解决方案：

var checkbox = document.getElementById("<YOUR-CHECKBOX-ID>");
var firstDiv =  document.getElementById("<YOUR-FIRST-DIV-ID>");
var secondDiv =  document.getElementById("<YOUR-SECOND-DIV-ID>");
checkbox.onclick = function(){
    if(checkbox.checked){
        firstDiv.style.display = "block";
        secondiv.style.display = "none";
    } else {
        firstDiv.style.display = "none";
        secondiv.style.display = "block";
    }
}

Answer 3

更简单地使用onClick ..

<input type="checkbox" onclick="document.getElementById('sp-click').innerHTML = 'Check Box = ' + this.checked;" id="click">

<span id="sp-click"></span>

您可以使用它来更改某些div的样式/可见性以隐藏和显示它们。

e.g。

<input type="checkbox" onclick="changeClass(this.checked);" id="click">

<script>
function changeClass(checkbox){

var divone = document.getElementById('divone')
var divtwo = document.getElementById('divtwo')

if(checkbox == 'true'){
divone.style.display = "none";
divtwo.style.display = "inline";
} else {
divone.style.display = "inline";
divtwo.style.display = "none";
}

}
</script>

如果选中复选框，则显示div，否则显示不同的div

3 个答案: