复选框如果选中，然后显示div else显示不同的div

我有一个复选框。如果我选择复选框，那么我需要显示一个特定的div，如果它没有选中，然后显示另一个div。有人可以帮我解决这个问题。复选框如果选中，然后显示div else显示不同的div

我已经研究过，我只找到了例子，如果复选框被选中，然后显示div或隐藏div。但我的问题有点不同。如果这是不可能的复选框，并可能与其他领域也请让我知道。在此先感谢。

2011-08-30 swathi

你能告诉你试过了吗？您只需要更改隐藏代码以添加对第二个div的支持。并在显示代码中添加隐藏第二个div的支持 –

如果你发布的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"; 
    } 
}

来源

2011-08-30 17:59:53 Chandu

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'; 
};

来源

2011-08-30 18:00:11 DaveRandom

更简单地使用的onClick ..

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

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

您可以使用它来改变某些div的风格/能见度隐藏和显示他们..

<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>

来源

2011-08-30 18:05:33 Wez

复选框如果选中，然后显示div else显示不同的div

回答

相关问题