所以我使用这段代码来显示/隐藏 3 个 div。它就像一个魅力。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function getCookieValue(a) {
var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
return b ? b.pop() : '';
}
$(document).ready(function(){
var redEl = $('input[value="red"]');
var greenEl = $('input[value="green"]');
var blueEl = $('input[value="blue"]');
if (document.cookie.indexOf('red=') != -1) {
redEl.prop("checked", $.parseJSON(getCookieValue("red")));
}
if (document.cookie.indexOf('green=') != -1) {
greenEl.prop("checked", $.parseJSON(getCookieValue("green")));
}
if (document.cookie.indexOf('blue=') != -1) {
blueEl.prop("checked", $.parseJSON(getCookieValue("blue")));
}
$(".red").toggle(redEl.prop("checked"));
$(".green").toggle(greenEl.prop("checked"));
$(".blue").toggle(blueEl.prop("checked"));
$('input[type="checkbox"]').click(function(){
var expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 1);
expiryDate = expiryDate.toUTCString();
if($(this).attr("value")=="red"){
$(".red").toggle(this.checked);
document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate;
}
if($(this).attr("value")=="green"){
$(".green").toggle(this.checked);
document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate;
}
if($(this).attr("value")=="blue"){
$(".blue").toggle(this.checked);
document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate;
}
});
});
</script>
</head>
<body>
<div>
<label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>
但我想再补充一点。 这就是我想要的:
div 红色为 50% 宽度 绿色是 50% 宽度 蓝色是 100% 宽度。
我想要的是:如果显示/选中绿色，则 div 红色为 50%。如果未选中/关闭 div 绿色，则 div 红色变为 100%。蓝色的一直都是正常的，没有任何改变。
最佳答案
试一试:100% 可行...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function getCookieValue(a) {
var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
return b ? b.pop() : '';
}
$(document).ready(function(){
var redEl = $('input[value="red"]');
var greenEl = $('input[value="green"]');
var blueEl = $('input[value="blue"]');
if (document.cookie.indexOf('red=') != -1) {
redEl.prop("checked", $.parseJSON(getCookieValue("red")));
}
if (document.cookie.indexOf('green=') != -1) {
greenEl.prop("checked", $.parseJSON(getCookieValue("green")));
}
if ($('#chkgreen').is(':Checked')) {
$(".red").css('width', '50%');
}
else {
$(".red").css('width', '96.8%');
}
if (document.cookie.indexOf('blue=') != -1) {
blueEl.prop("checked", $.parseJSON(getCookieValue("blue")));
}
$(".red").toggle(redEl.prop("checked"));
$(".green").toggle(greenEl.prop("checked"));
$(".blue").toggle(blueEl.prop("checked"));
$('input[type="checkbox"]').click(function(){
var expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 1);
expiryDate = expiryDate.toUTCString();
if($(this).attr("value")=="red"){
$(".red").toggle(this.checked);
document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate;
}
if($(this).attr("value")=="green"){
$(".green").toggle(this.checked);
document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate;
}
if($(this).attr("value")=="blue"){
$(".blue").toggle(this.checked);
document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate;
}
});
});
</script>
</head>
<body>
<div>
<label>
<input type="checkbox" name="colorCheckbox" value="red" id="chkred" />
red</label>
<label>
<input type="checkbox" name="colorCheckbox" value="green" id="chkgreen"/>
green</label>
<label>
<input type="checkbox" name="colorCheckbox" value="blue" id="chkblue"/>
blue</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>
关于javascript - 显示/隐藏 div javascript 触发 div 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33432379/