如何使用 jquery ajax 通过单击将复选框值传递给 PHP


how to pass checkbox value by click to php using jquery ajax

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#prodbrand,#prodname,#prodsize,#prodcolor,#prodtype,#prodminprise,#prodmaxprise
    {
    border: 1px solid #d1caca;
    font-size: 14px;
    background: #f8f4f4;
    margin-top: 3px;
    color: #205a60;
}
#prodnamelist,#prodbrandlist,#prodsizelist {
    font-size: 12px;
}
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space: nowrap;
    display: inline-block;
}
</style>
</head>
<script src="jquery.js"></script>
<script language="javascript">   $("#prodminprise").click(function(){ 
        $("#prodminpriselist").slideToggle();  });
    $("#prodbrand").click(function(){ 
        $("#prodbrandlist").slideToggle();  });

    $("#prodname").click(function(){
        $("#prodnamelist").slideToggle();
    });
    $("#prodsize").click(function(){
        $("#prodsizelist").slideToggle();
    });
    $("#prodcolor").click(function(){
        $("#prodcolorlist").slideToggle('400');
    });
    $("#prodtype").click(function(){
        $("#prodtypelist").slideToggle('400');
    });
    </script>
<script language="javascript"
    src="https://code.jquery.com/jquery-1.11.1.min.js"
    type="text/javascript"></script>
<script language="javascript" type="text/javascript">

    $('#.manufactureBy').click(function(){
                var value= $(this).val();
                $.ajax({
                    url: 'deleteProduct.php',
                    type: 'POST',
                    data: {check:value},
                    success: function(data){
                        alert(data);
                    }
                });

            });

            </script>
<body width="200">

    <?php
    if(isset($_POST['key'] )){
        if($_POST['key']=="all"){
            $_POST['key']=null;
        }
        $key1 = trim($_POST['key']); //        if($key1.length> 1){
        $con = mysql_connect("localhost","root","1234");
        if (!$con) {
            die('Could not connect: ' . mysql_error());
        }
        mysql_select_db("productdetails", $con);
        $sql= ("SELECT   upper(pname), upper(manufacturBy), upper(psize),upper(pcolor),upper(pType)  FROM proddetail where shortSearch like '%".$key1."%' or pcolor like '".$key1."%' or pType like '".$key1."%' or psize like '".$key1."%'");
        $query = mysql_query($sql);
        $sqlp=("select min(saleprize),max(saleprize) from proddetail where shortSearch like '%".$key1."%' or pcolor like '".$key1."%' or pType like '".$key1."%'");
        $queryp = mysql_query($sqlp);
        while($rowp = mysql_fetch_array($queryp)){
            $MinPraise= $rowp['min(saleprize)'];
            $MaxPraise =$rowp['max(saleprize)'];
        }    while($row = mysql_fetch_array($query)){
            $manufactur[] = $row['upper(manufacturBy)'];
            $productnam[] = $row['upper(pname)'];
            $productsiz[] = $row['upper(psize)'];
            $productcolor[] = $row['upper(pcolor)'];
            $productmaxpris[] = $row['max(saleprize)'];
            $producttyp[] = $row['upper(pType)'];
        }
        $manufacture = array_unique($manufactur);
        $productname = array_unique($productnam);
        $productsize = array_unique($productsiz);
        $productcolors = array_unique($productcolor);
        $producttype = array_unique($producttyp);
        ?>
    <div id="prodminprise">
        <span>prise</span>
    </div>
    <div id="prodminpriselist">
        <?php
        echo 'Min : '. $MinPraise;
        echo '<br>Max : '. $MaxPraise;  ?>
    </div>
    <!--</div>-->
    <div id="leftFilters">
        <div id="prodbrand">
            <span id="plus"></span><span>Brand</span>
        </div>
        <div id="prodbrandlist">
            <?php            
            foreach ($manufacture as $brand) {
                ?>
            <input name="select[<?php echo $brand; ?>]" type="checkbox"
                class="manufactureBy" id="click_checkbox"
                value="<?php echo $brand; ?>">
            <?php // echo $brand; ?>
            </label> <br>
            <?php } ?>
        </div>
        <div id="prodname">
            <span>Prod. Name</span>
        </div>
        <div id='prodnamelist'>
            <?php  foreach ($productname as $proname) {     
                ?>
            <input type="checkbox" class="productname"
                value="<?php echo $proname; ?>">
            <?php // echo $proname; ?>
            <br>
            <?php  } ?>
        </div>
        <div id="prodsize">
            <span>Size</span>
        </div>
        <div id="prodsizelist">
            <?php   foreach ($productsize as $prosize) {      
                ?>
            <input type="checkbox" class="productsize"
                value="<?php echo $prosize; ?>" onclick="doit()">
            <?php // echo $prosize; ?>
            <br>
            <?php }  ?>
        </div>
        <div id="prodcolor">
            <span>Color</span>
        </div>
        <div id="prodcolorlist">
            <?php   foreach ($productcolors as $procolor) {      
                ?>
            <input type="checkbox" class="productcolor"
                value="<?php echo $procolor; ?>" onclick="doit()">
            <?php // echo $procolor; ?>
            <br>
            <?php }  ?>
        </div>
        <div id="prodtype">
            <span>Products/Type</span>
        </div>
        <div id="prodtypelist">
            <?php   foreach ($producttype as $protype) {      
                ?>
            <input type="checkbox" class="producttype"
                value="<?php echo $protype; ?>" onclick="doit()">
            <?php // echo $protype; ?>
            <br>
            <?php }  ?>
        </div>
    </div>
    <?php } ?>
</body>
</html>

您可以将jQuery中的选择更改为:

$('.manufactureBy').click(function(){
   var value= $(this).val();
console.log(value); // checkbocx value
..........
});

你不能这样使用:

$('#.manufactureBy')

因为您将manufactureBy用作 Checkboc 输入字段的类名。 要使用类名获取输入值,只需使用 $('.yourClassName') 即可。

当您想使用 ID 属性获取输入值时,您可以将其更改为: $('#yourIDName') .