仅在选中复选框时显示数据
[英]display data only on selecting a checkbox
问题描述
i have a check box, and want that when it is selected/checked, values from another file (ie c_datetime.php) should get loaded, for this i have used ajax, when i select/check the checkbox the values are getting loaded properly but when i uncheck it the loader gets loaded again and the ajax displays the data again, whereas the proper way should have been that when the checkbox is selected the values should get loaded and when its unselected the values should disappear, can anyone please tell why its not working the way it should 
我有一个复选框，并希望当它被选中/选中时，另一个文件（即c_datetime.php）中的值应该被加载，为此我使用了ajax，当我选中/选中该复选框时，这些值已正确加载但是当我取消选中它时，加载器会再次加载，而ajax会再次显示数据，而正确的方法应该是，当选中复选框时，应该加载值，而当未选中时，值应该消失，有人可以告诉为什么它无法正常工作
<script>
$(document).ready(function(){
$('#drive').change(function(){
var catid = $('#drive').val();
console.log($('#drive'))
if(catid != 0)
{
LodingAnimate();
$.ajax({
type:'post',
url:'c_datetime.php',
data:{id:catid},
cache:false,
success: function(returndata){
$('#datetime').html(returndata);
console.log(returndata)
}
});
function LodingAnimate()
{
$("#datetime").html('<img src="img/ajax-loader.gif" height="40" width="40"/>');
}
}
}
)
})
</script>
<div id="datetime"> </div>
<input type="checkbox" name ="chk" id="drive" value="Drive" >Drive
4 个解决方案
解决方案1
2 已采纳 2015-10-29 04:08:43
$(document).ready(function () {
$('#drive').change(function () {
if ($(this).is(':checked')) {
var catid = $('#drive').val();
console.log($('#drive'))
if (catid != 0)
{
LodingAnimate();
$.ajax({
type: 'post',
url: 'c_datetime.php',
data: {
id: catid
},
cache: false,
success: function (returndata) {
$('#datetime').html(returndata);
console.log(returndata)
}
});
function LodingAnimate() {
$("#datetime").html('<img src="img/ajax-loader.gif" height="40" width="40"/>');
}
}
}else{
$("#datetime").hide();
}
})
})
Try this 尝试这个
you should check if the checkbox is check only then load the data add if($(this).is(':checked')) condition 您应该检查复选框是否仅选中然后加载数据并添加if($(this).is(':checked'))条件
解决方案2
2 2015-10-29 04:09:12
Try using if condition this.checked within change event handler. 尝试在change事件处理程序中使用if条件this.checked 。 If #drive property checked returns true , call $.ajax() , else do not call $.ajax() 如果checked #drive属性返回true ，则调用$.ajax() ，否则不要调用$.ajax()
$(document).ready(function() { $('#drive').change(function() { if (this.checked) { // do `$.ajax()` stuff console.log(this.checked) } else { // do not do `$.ajax()` stuff console.log("not checked") } }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" name="chk" id="drive" value="Drive">Drive
解决方案3
0 2015-10-29 04:32:40
Here's what you are looking for:- 您正在寻找的是：-
<!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;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="red"){
$(".red").toggle();
}
});
});
</script>
</head>
<body>
<div>
<label><input type="checkbox" name="colorCheckbox" value="red"> Drive</label></div>
<div class="red box">
<img src="Koala.jpg" alt="Mountain View" style="width:304px;height:228px;"></div>
</body>
</html>
解决方案4
0 2015-10-29 05:16:13
<form action="#" method="post">
<input type="checkbox" name="check_list[]" value="C/C++"><label>C/C++</label><br/>
<input type="checkbox" name="check_list[]" value="Java"><label>Java</label><br/>
<input type="checkbox" name="check_list[]" value="PHP"><label>PHP</label><br/>
<input type="submit" name="submit" value="Submit"/>
</form>
<?php
if(isset($_POST['submit'])){//to run PHP script on submit
if(!empty($_POST['check_list'])){
// Loop to store and display values of individual checked checkbox.
foreach($_POST['check_list'] as $selected){
echo $selected."</br>";
}
}
}
?>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.