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

试试这个

demo

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

Answer 2

尝试在if事件处理程序中使用this.checked条件change。如果#drive属性checked返回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 个答案: