Question

我希望我在这里走在正确的轨道上......

我的页面（表格）上有一些元素......根据查询数据库的结果动态生成....（我在容器DIV中添加）..

这些表中的

是一些文本......还有一些复选框......每个表都是相同的（在文本字段的值之外）..

当用户点击复选框时..我将一个元素添加到另一个容器DIV中。

如果用户取消选中复选框，则会从侧面的容器DIV中删除该元素。在每次“点击”事件中......我也是在ARRAY中添加或删除'选择'（并且还将此数组更新为我的PHP SESSION）..

当用户完成时...他们点击一个按钮然后转到另一个页面..抓住这个SESSION数组并查看/总结他们的'选择'..

*没有FORM标签..复选框是表中的自由格式（没有包装在任何FORM标签中..所以没有一般的POST动作来抓取所有东西..因此使用数组/ SESSION）< / p>

如果用户返回原始的“选择页面”（带有表格/复选框）..

我正在重新填充PAGE（重新检查任何复选框......并将容器DIV中的元素重新填充到一边......所有这些都基于SESSION数据）

在每个复选框中..我正在添加一个小PHP函数来写入checked =“checked”或不..当复选框实例化时）

像这样：

<label><input id="articlesnaming" name="Articles Naming Expert" type="checkbox" value="0.00" <?=sessionCheck($row["id"] ."-A","Articles Naming Expert") ?> onclick=""/>&nbsp;Articles Naming Expert</label>

仅供参考：关于被调用的函数：

function sessionCheck($recordID, $checkBoxID){
    if(isset($_SESSION['userPicks']) && count($_SESSION['userPicks']) != 0){        
        for($r = 0; $r< count($_SESSION['userPicks']); $r++){
            if($_SESSION['userPicks'][$r]['recordid'] == $recordID){
                for($z=0; $z < count($_SESSION['userPicks'][$r]['itemsordered']); $z++){
                    if($_SESSION['userPicks'][$r]['itemsordered'][$z]['name'] == $checkBoxID){
                        return 'checked="checked"';
                    }else if($z == (count($_SESSION['userPicks'][$r]['itemsordered']) - 1)){
                        return "";
                    }
                }
            }else if($r == (count($_SESSION['userPicks']) - 1)){
                return "";
            }
        }
    }else{
        return "";
    }
}

到目前为止，一切都很顺利......

当我在侧面的容器DIV中动态构建/添加（追加）这些元素时...发生问题。

我正在添加它们就好了，当用户重新访问页面时...他们选择的前一个复选框再次被检查... - 和 - ..元素在容器DIV中到达一边舞台/屏幕）......

问题：当我取消选中其中一个复选框时，它是否不会删除侧面容器DIV中的元素？我必须重新单击复选框..（这会添加一个副本）..然后我可以取消检查它..但它只删除了新的..

在刷新/重新访问页面之前，一切似乎都能正常工作（我必须自动填充复选框和侧面容器DIV中的元素）..然后复选框停止表现/与元素交互通过另一个函数添加（仍然是相同的ID ...路径...从我可以告诉的...）和 - 并 - 通过初始复选框事件/动作添加..

我在这里抓住稻草......也许是因为我正在使用PHP函数来设置刷新复选框？它可能不知道它的当前状态？（虽然复选框的视觉状态是准确/正确的）

任何想法都表示赞赏。

用于设置/取消设置复选框的代码＆amp;添加/删除侧容器DIV中的元素：

<script>
//var to hold current check box clicked
var targetCheckbox;
//var to hold cumulative total
var totalPrice = 0;
//array to keep track of user picks from returned record results

//try to get SESSION array (if available/set) from PHP into jQuery using json_encode()
<?php if(isset($_SESSION['userPicks'])){ ?>
    //overwrite jQuery userPicks MAIN array
    var userPicks = <?php echo json_encode($tempArray) ?>;
<? }else{ ?>
    //create new jQuery userPicks MAIN array, and populate through user clicks/interaction
    var userPicks = [];
<? } ?>

$(document).ready(function() {
    //check to see if seesion and populate checks and side column from previous picks
    //if existing session, loop through and populate the CHOICES column
    if(userPicks.length > 0){
        console.log("SESSION EXISTS, POPULATE CHOICES COLUMN FROM ARRAY");
        for(i=0; i<userPicks.length; i++){
            //build up sub array data first then append at one time.
            var subArrayLength = userPicks[i].itemsordered.length;
            var subArray = '';
            for(s=0; s<subArrayLength; s++){
                subArray += '<li id="' + userPicks[i].orderid + userPicks[i].checkboxid + '">' + userPicks[i].itemsordered[s].name + '</li>';
            }           
            $("#choicesWrapper #itemList").append('<div class="recordChoices"><h5>CASE NAME: '+userPicks[i].casename+'</h5><ul id="'+userPicks[i].recordid+'">'+subArray+'</ul></div>');            

        }
    }

    //onClick event
    $('.orderOptions').on('click', 'input:checkbox', function () {

        //routine when checkbox is checked
        if ($(this).is(":checked")) {               
            $(this).prop("checked", true);
            console.log("checked");

            //console.log('doesnt exist..create it');
            $("#choicesWrapper #itemList").append('<div class="recordChoices"><h5>CASE NAME: '+caseName+'</h5><ul id="'+resultsID+'"><li id="'+orderID+targetCheckbox+'">'+itemOrdered+'</li></ul></div>');
        }else{          
            $(this).prop("checked", false);
            console.log("un-checked");

            //remove the option from right column (li element)  
            console.log("REMOVE TARGET: #choicesWrapper #itemList #"+resultsID+" "+orderID+targetCheckbox);
            $("#choicesWrapper #itemList #"+resultsID+" #"+orderID+targetCheckbox).remove();


            //check if no more children and remove parent/title (record container/div)          
            if ($("#choicesWrapper #itemList #"+resultsID+" li").length > 0) { 
                //console.log("Still has children...do nothing");               
            }else{
                //console.log("No Children...");
                $("#choicesWrapper #itemList #"+resultsID).parent().remove();               
            }
        }
    }
}
</script>

奇怪的是，当事件从SESSION数据中“自动填充”时（比如刷新或重新访问页面）以及当事情“中断”时，取消选中复选框并不会删除内容，但是当我取消选中时组中的最后一个复选框，它确实删除了父项（以便正在执行父项删除代码/例程......但不是子项）

我认为这是一个路径问题？（我相信我正在用完全相同的ID /类等创建东西。）

如果你回答，绝对值得+1！：）

我能想到的另一件事是..如何创建userPicks数组..初始访问页面，我只是创建一个空的JS / jQuery数组并等待用户点击复选框时推送/填充它（上面代码为onClick东西）。

但是当用户访问页面（刷新或重新访问）和-HAS-（之前的）SESSION数据仍然可用时....然后我抓住PHP SESSION数组..并使用{{1将其传递给jQuery }} ...

我是否需要以不同于正常创建的方式添加/删除该数组？

正确设置复选框状态

0 个答案: