Question

我试图让每个用户选择他感兴趣的市场领域，使用复选框[show / hide] - 使用javascript的div方法，但我不知道保存每个用户选择的复选框-dc，我是否使用cookie或将其保存到数据库以及我如何在php中完成它？

    // function for show/hide divs depend on select input
  <script>
    function showMe (box) {
        var chboxs = document.getElementsByName("c1");
        var div = "none";
            for(var i=0; i<chboxs.length; i++) { 
                if(chboxs[i].checked){
                    div = "block";
                     break;
                }
            }
        document.getElementById(box).style.display = div;
    }
 </script>

//选择商店字段的表格

<form action="chooseShop.php" method="">
    <input type="checkbox" name="c1" value="Electrionics" Onclick="showMe('cssmenu_1')">Electrionics<br />
    <input type="checkbox" name="c1" value="Clothes" Onclick="showMe('cssmenu_2')">Clothes<br / >
    <input type="checkbox" name="c1" value="perfums" Onclick="showMe('cssmenu_3')" >perfums<br / >

    <button><a href="index.php">Next</a></button><br /><br />  
</from>

// THE Main DIVs
<div id='cssmenu' >

        <ul>
           <li class='active'><a href='#'><span>Much Me</span></a></li>
           <li class='last'><a href='#'><span>Profile </span></a></li>


           <li class='has-sub' id="cssmenu_1" style="display:none" ><a href='#'><span>Electrionics</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
                 <li><a href='#'><span>Product 3</span></a></li>
                 <li><a href='#'><span>Product 4</span></a></li>
                 <li class='last'><a href='#'><span>Product 5</span></a></li>
              </ul>
           </li>



            <li class='has-sub' id="cssmenu_2" style="display:none"><a href='#'><span>Clothes</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
                 <li><a href='#'><span>Product 3</span></a></li>
                 <li><a href='#'><span>Product 4</span></a></li>
                 <li class='last'><a href='#'><span>Product 5</span></a></li>
              </ul>
           </li>


            <li class='has-sub' id="cssmenu_3" style="display:none"><a href='#'><span>perfums</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
                 <li><a href='#'><span>Product 3</span></a></li>
                 <li><a href='#'><span>Product 4</span></a></li>
                 <li class='last'><a href='#'><span>Product 5</span></a></li>
              </ul>
           </li>

    </div>

Answer 1

这取决于您希望存储信息的时间。 PHP会话是最短的，它们将仅持续用户打开其选项卡的时间。

Cookie具有下一个最长的保质期，它们将存储在用户的浏览器中指定的天数，您可以设置。

数据库用于存储长期使用的信息。如果您希望用户能够永久保存他们的偏好，这是最好的方法。

Answer 2

如果这是用户体验而您不必将值存储在某个数据库中，我会使用本地存储。

这是a working jsFiddle选择一个或两个框，然后单击运行以便内页重新加载，您将看到重新加载后会记住您的选择。

    function showMe(box) {
        //get and loop through all the checkboxes
        var chboxs = document.getElementsByName("c1");
        for (var i = 0; i < chboxs.length; i++) {

            if (chboxs[i].checked) {
                // if the box is checked, show group save the selection to local storage
                document.getElementById("cssmenu_"+i).style.display = "block";
                localStorage.setItem("hasGroup" + i, "yes");
            }
            else{
                //otherwise set each group in not visible and save state to local storage
                document.getElementById("cssmenu_"+i).style.display = "none";
                localStorage.setItem("hasGroup" + i , "no");
            }
        }
    }


window.onload=function(){
    //check for saved groups and display them if found
    var chboxs = document.getElementsByName("c1");
    for (var i = 0; i < chboxs.length; i++) {
        var div = "none";
        if (localStorage.getItem("hasGroup" + i ) == "yes") {
            div = "block";
            //re-check the box
            chboxs[i].checked = true;
        }
        document.getElementById('cssmenu_' + i).style.display = div;
    }
};

PHP：将值和Div保存到另一页

2 个答案: