0

有一个复选框列表。用户单击“未选中复选框”的图像。Ajax 向 php 脚本发送请求，该脚本更新数据库并回显“选中复选框”的新图像源。这很好用，如下所示：

HTML：

<a href="" class="markBox" id="<?php echo $box->id ?>" name="markBox"><img src="<?php echo ( $box->complete == 1 ) ? "/images/checkbox-filled.png" : "/images/checkbox-empty.png" ?>" id="checkbox-<?php echo $box->id ?>" /></a>

标记框.js：

        $.ajax( {

            type: "POST",
            url: "/scripts/markBox.php",
            data: data,
            cache: false,

            success: function( imageSource ) {
                image.attr( 'src', imageSource );
            }
        } );

标记框.php：

    //Return result
    if ( $box->complete == 1 )
        echo "/images/checkbox-filled.png";
    else
        echo "/images/checkbox-empty.png";

    exit;

挑战在于，我在复选框列表上方有之前调用的 php 函数，以向用户显示框是如何被选中的，有多少不是。我希望像图像一样调用并刷新此框。ajax 回来后，如何重新运行 php 函数以再次运行？

HTML：

            <div class="markBox"><?php echo $results->getCountComplete() ?> Complete</div>
        <div class="markBox"><?php echo $results->getCountNotComplete() ?> Incomplete</div>
4

1 回答 1

2

您根本不需要 ajax：（除非您不想将数据存储到数据库或文件中）：我希望这会有所帮助：

http://jsfiddle.net/teeEx/

HTML：

<a href="javascript:;" id="check1"><span class="checked">&nbsp;</span></a>
<a href="javascript:;" id="check2"><span class="unchecked">&nbsp;</span></a>
<a href="javascript:;" id="check3"><span class="unchecked">&nbsp;</span></a>

<div id="result"></div>

CSS：

a{
    text-decoration: none;
}
span{
    display: block;
    width: 30px;
    height: 30px;
    margin: 20px;
}
span.checked{
   background: green;
}
span.unchecked{
   background: black;
}

JS：

$('a').click(function(){
    var a_obj = $(this);
    var obj = a_obj.children('span');
    if( obj.is('.checked')){
     obj.removeClass('checked').addClass('unchecked');   
    } else {
     obj.removeClass('unchecked').addClass('checked');   
    }

    var all = a_obj.parent();
    var countChecked = all.find('span.checked').length;
    var countunChecked = all.find('span.unchecked').length;
    $('#result').html('checked '+countChecked+'; unckecked: '+countunChecked);
});
于 2013-06-18T19:44:20.003 回答