隐藏div复选框之前检查
我是新来的编程,我有一个问题,我无法解决。基本上我希望Divs被隐藏或显示,基于用户是否点击复选框。该代码的作品,但问题是,所有我的div隐藏而不是显示时点击复选框。我怎样才能解决这个问题?我希望它们在加载页面时不显示,只在点击时显示。在页面加载隐藏div复选框之前检查
function checkSelect(el) {
if ($('#all').prop('checked') == true) {
$('#all').prop('checked', false);
$(el).show();
}
}
function showSelect(el) {
checkSelect('.box');
\t \t \t var val = $(el).data('tags');
$('div[class$="' + val + '"]').toggle('slow');
}
$(function() {
// Setze Startbedingung
$('#all').prop('checked', false);
// Auswahl
$('#checkform input').change(function() {
showSelect(this);
});
// Reset oder All
$('#resetform input').change(function() {
$('#checkform input').prop('checked', false);
if ($(this).prop('checked') == true) {
$('.box').show('slow');
}
else {
// do nothing
$(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkform">
<form>
<h1>Worüber möchtest du von uns lesen?</h1>
<fieldset>
<ul>
<li>
<input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1">
<label for="checkbox1"><span>Sonne</span></label>
</li>
<li>
<input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2">
<label for="checkbox2"><span>Meer</span></label>
</li>
<li>
<input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3">
<label for="checkbox3"><span>Action</span></label>
</li>
</ul>
</fieldset>
</form>
</div>
<div class="divWrapper">
<div class="kolonne1">
<div class="box sonne">
<p>sonne</p>
</div>
<div class="box meer">
<p>meer</p>
</div>
<div class="box action">
<p>action</p>
</div>
你只需要先通过隐藏的jQuery或CSS的所有div。
隐藏使用jQuery:$('.box').hide();
隐藏使用CSS:.box{ display:none }
请参见下面的工作代码:
function checkSelect(el) {
if ($('#all').prop('checked') == true) {
$('#all').prop('checked', false);
$(el).show();
}
}
function showSelect(el) {
checkSelect('.box');
var val = $(el).data('tags');
$('div[class$="' + val + '"]').toggle('slow');
}
$(function() {
$('.box').hide();
// Setze Startbedingung
$('#all').prop('checked', false);
// Auswahl
$('#checkform input').change(function() {
showSelect(this);
});
// Reset oder All
$('#resetform input').change(function() {
$('#checkform input').prop('checked', false);
if ($(this).prop('checked') == true) {
$('.box').show('slow');
}
else {
// do nothing
$(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkform">
<form>
<h1>Worüber möchtest du von uns lesen?</h1>
<fieldset>
<ul>
<li><input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1"> <label for="checkbox1"><span>Sonne</span></label>
</li>
<li><input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2"> <label for="checkbox2"><span>Meer</span></label></li>
<li><input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3"> <label for="checkbox3"><span>Action</span></label>
</li>
</ul>
</fieldset>
</form>
</div>
<div class="divWrapper">
<div class="kolonne1">
<div class="box sonne">
<p>sonne</p>
</div>
<div class="box meer">
<p>meer</p>
</div>
<div class="box action">
<p>action</p>
</div>
</div>
</div>
与css它的完美!谢谢 – marlen
很高兴帮助你@marlen,你可以接受或upvote,如果你喜欢! –
trigger
的更改功能使用:
.trigger('change')
请参见下面的演示:
function checkSelect(el) {
if ($('#all').prop('checked') == true) {
$('#all').prop('checked', false);
$(el).show();
}
}
function showSelect(el) {
checkSelect('.box');
var val = $(el).data('tags');
$('div[class$="' + val + '"]').toggle('slow');
}
$(function() {
// Setze Startbedingung
$('#all').prop('checked', false);
// Auswahl
$('#checkform input').change(function() {
showSelect(this);
}).trigger('change'); // ADDED
// Reset oder All
$('#resetform input').change(function() {
$('#checkform input').prop('checked', false);
if ($(this).prop('checked') == true) {
$('.box').show('slow');
} else {
// do nothing
$(this).prop('checked', false);
}
}).trigger('change'); // ADDED
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkform">
<form>
<h1>Worüber möchtest du von uns lesen?</h1>
<fieldset>
<ul>
<li>
<input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1">
<label for="checkbox1"><span>Sonne</span></label>
</li>
<li>
<input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2">
<label for="checkbox2"><span>Meer</span></label>
</li>
<li>
<input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3">
<label for="checkbox3"><span>Action</span></label>
</li>
</ul>
</fieldset>
</form>
</div>
<div class="divWrapper">
<div class="kolonne1">
<div class="box sonne">
<p>sonne</p>
</div>
<div class="box meer">
<p>meer</p>
</div>
<div class="box action">
<p>action</p>
</div>
添加CSS隐藏在页面加载的DIV的,
.box{
display:none;
}
这里的演示:https://jsfiddle.net/485c2uv0/
function checkSelect(el) {
if ($('#all').prop('checked') == true) {
$('#all').prop('checked', false);
$(el).show();
}
}
function showSelect(el) {
checkSelect('.box');
\t \t \t var val = $(el).data('tags');
$('div[class$="' + val + '"]').toggle('slow');
}
$(function() {
// Setze Startbedingung
$('#all').prop('checked', false);
// Auswahl
$('#checkform input').change(function() {
showSelect(this);
});
// Reset oder All
$('#resetform input').change(function() {
$('#checkform input').prop('checked', false);
if ($(this).prop('checked') == true) {
$('.box').show('slow');
}
else {
// do nothing
$(this).prop('checked', false);
}
});
});
.box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkform">
<form>
<h1>Worüber möchtest du von uns lesen?</h1>
<fieldset>
<ul>
<li>
<input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1">
<label for="checkbox1"><span>Sonne</span></label>
</li>
<li>
<input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2">
<label for="checkbox2"><span>Meer</span></label>
</li>
<li>
<input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3">
<label for="checkbox3"><span>Action</span></label>
</li>
</ul>
</fieldset>
</form>
</div>
<div class="divWrapper">
<div class="kolonne1">
<div class="box sonne">
<p>sonne</p>
</div>
<div class="box meer">
<p>meer</p>
</div>
<div class="box action">
<p>action</p>
</div>
完美无缺!谢谢 – marlen
这里是另一种解决方案。代码改进。希望这可以帮助。
jQuery(document).ready(function() {
$('.divWrapper div.box').hide();
// Setze Startbedingung
$('#all').prop('checked', false);
// Auswahl
$('#checkform input:checkbox').change(function() {
var _this = $(this), box = $('div.box[class*="' + _this.attr("data-tags") + '"]');
switch (true) {
case _this.is(':checked'):
box.show('slow');
break;
default:
box.hide('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkform">
<form>
<h1>Worüber möchtest du von uns lesen?</h1>
<fieldset>
<ul>
<li>
<input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1">
<label for="checkbox1"><span>Sonne</span></label>
</li>
<li>
<input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2">
<label for="checkbox2"><span>Meer</span></label>
</li>
<li>
<input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3">
<label for="checkbox3"><span>Action</span></label>
</li>
</ul>
</fieldset>
</form>
</div>
<div class="divWrapper">
<div class="kolonne1">
<div class="box sonne">
<p>sonne</p>
</div>
<div class="box meer">
<p>meer</p>
</div>
<div class="box action">
<p>action</p>
</div>
全部隐藏在你最初的函数中使用下面的代码字段:
$('.box').hide();
尝试:
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Checkboxes</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></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>
使用'css' - '.box的{显示:无;}'**实施例:** https://jsfiddle.net/cadjdsrm/ – NewToJS
完美的作品!谢谢 – marlen