仅在选中复选框时显示数据

Question

我有一个复选框，并希望当它被选中/选中时，另一个文件（即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

Answer 1

    $(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();
        }
    })
})

尝试这个

演示

您应该检查复选框是否仅选中然后加载数据并添加if($(this).is(':checked'))条件

Answer 2

尝试在change事件处理程序中使用if条件this.checked 。 如果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

Answer 3

您正在寻找的是：-

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

Answer 4

<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>";
            }
        }
    }
?>

仅在选中复选框时显示数据

问题描述

4 个解决方案

解决方案1
2 已采纳 2015-10-29 04:08:43

解决方案2
2 2015-10-29 04:09:12

解决方案3
0 2015-10-29 04:32:40

解决方案4
0 2015-10-29 05:16:13

仅在选中复选框时显示数据

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-10-29 04:08:43

解决方案2 2 2015-10-29 04:09:12

解决方案3 0 2015-10-29 04:32:40

解决方案4 0 2015-10-29 05:16:13

解决方案1
2 已采纳 2015-10-29 04:08:43

解决方案2
2 2015-10-29 04:09:12

解决方案3
0 2015-10-29 04:32:40

解决方案4
0 2015-10-29 05:16:13