Question

我承认，仍然是jquery的noobie，我有一个总共有12个按钮/切换的页面（只有3个显示为示例），点击后每个都会拉出一个php页面，其中列出了一组复选框在高级搜索页面上的div内的产品。由于每个复选框列表之间存在大量信息，因此会降低系统速度，因此我必须在单击时创建一个事件，它会在需要时从另一个php页面中提取该复选框信息。问题是......当我在按钮之间切换时，复选框不会保持检查状态。我已经尝试了一个功能，它在设置了localstorage项目时检查但似乎没有用。因此，在返回每个按钮/切换时，需要您帮助您了解如何使复选框保持检查状态。

那么有什么方法可以在切换时检查我的复选框吗？以及如何（请使用代码示例）

有没有更好的方法可以让这项工作更有效率，所以它会更快地加载页面？如果是这样，怎么样？（请使用代码示例）

KITE_PAGE.PHP（对于球，呼拉圈和其他产品也一样）

     <div>
        <input type="checkbox" class="product_chkKite101" name="product_chk" value=" Like Kite 101 " /><label >Like USA Kite</label>
        <input type="checkbox" class="product_chkKite102" name="product_chk" value=" Like Kite 102 " /><label >Like Mexico Kite</label>
        <input type="checkbox" class="product_chkKite103" name="product_chk" value=" Like Kite 103 " /><label >Like Canada Kite</label>
    </div>

NOTLIKE_KITE_PAGE.PHP（适用于球，呼啦圈和其他产品）

     <div>
        <input type="checkbox" class="product_chkKite101" name="product_chk" value=" Not Like Kite 101 " /><label >Not Like USA Kite</label>
        <input type="checkbox" class="product_chkKite102" name="product_chk" value=" Not Like Kite 102 " /><label >Not Like Mexico Kite</label>
        <input type="checkbox" class="product_chkKite103" name="product_chk" value=" Not Like Kite 103 " /><label >Not Like Canada Kite</label>

    </div>

高级搜索页面：

高级搜索页面中的Html

按钮（再次只显示三个）：

    <ul class="category">
        <li><a href="#kite" class="category-btn kite-btn">KITES</a></li>
        <li><a href="#ball" class="category-btn ball-btn">BALLS</a></li>
        <li><a href="#hoop" class="category-btn hoop-btn">HULA HOOPS</a></li>
    </ul>

将加载页面的Div：

    <div id="product_container" >
        <div class="kite box" >
            <div class="tx-row" id='kite-in' >

            </div>
            <div class="tx-row"  id='kite-x' >

            </div>
        </div>
        <div class="ball box" >
            <div class="tx-row" id='ball-in' >

            </div>
            <div class="tx-row"  id='ball-x' >

            </div>
        </div>
        <div class="document box" >
            <div class="tx-row" id='hoop-in' >

            </div>
            <div class="tx-row"  id='hoop-x' >

            </div>
        </div>
    </div>

单击按钮时检索信息的JQuery

    $(document).ready(function(){   
        var $content = $('.box');
        function showContent(type) {
            $content.hide().filter('.' + type).show();
        }

        $('.category').on('click', '.kite-btn', function(e) {
            if ($('#kite-in').is(':empty')){                                                                                                
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }else {                                                     
                $("#kite-in").load("/wp-content/themes/child/kite_page.php");
                $("#kite-x").load("/wp-content/themes/child/notlike_kite_page.php");                                        
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }
        }); 
        $('.category').on('click', '.ball-btn', function(e) {
            if ($('#ball-in').is(':empty')){                                                                                                
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }else {                                                     
                $("#ball-in").load("/wp-content/themes/child/ball_page.php");
                $("#ball-x").load("/wp-content/themes/child/notlike_ball_page.php");                                        
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }
        });
        $('.category').on('click', '.hoop-btn', function(e) {
            if ($('#hoop-in').is(':empty')){                                                                                                
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }else {                                                     
                $("#hoop-in").load("/wp-content/themes/child/hoop_page.php");
                $("#hoop-x").load("/wp-content/themes/child/notlike_hoop_page.php");                                        
                showContent(e.currentTarget.hash.slice(1));
                e.preventDefault();
            }
        });
        $(".box").hide();
    });

另外一个问题：当在页面之间选中一个复选框时，有没有办法禁用具有相同类的复选框（例如：class =＆＃34; product_chkKite101＆＃34;）？

Answer 1

首先你可以做的就是在所有复选框的click属性上使用并传递当前元素并更好地使用id，因为它将是唯一的，只有一个用于一个复选框

 <input id="product_chkKite101" type="checkbox" onclick="checkChecked(this)" class="product_chkKite101" name="product_chk" value=" Not Like Kite 101 " /><label >Not Like USA Kite</label>

现在在checkChecked函数中首先创建一个空数组

var checkedCheckbox = [];

function checkChecked(ele){
   var id = ele.id;
   if ($.inArray(id, checkedCheckbox) !== -1)
   {
       var index = checkedCheckbox.indexOf(id);
       if (index > -1) {
          checkedCheckbox.splice(index, 1);
       }
   }else{
       checkedCheckbox.push(id);
   }
   localStorage.setItem("selected", JSON.stringify(selected));

}

现在要在重新加载页面时选中复选框，或者当按钮被选中时，您可以运行此代码

var checkCheckedStorage  = [];
$(function() {
  if (localStorage.getItem("selected") != null) {
    checkCheckedStorage = JSON.parse(localStorage.getItem("selected"));
        checkChecked = checkCheckedStorage;
    checkCheckedStorage.forEach(function(ele) {
      console.log(ele);
      $('#' + ele).prop('checked', true);
    });
  }
});

如果在切换按钮时没有执行此代码，那么您可以做的是再次在函数内部编写代码并从按钮的切换事件中调用它

Answer 2

我弄清楚为什么它不能保持检查。每次我再次点击按钮/切换时，它都会重新加载信息。我的if语句在我的jquery中是正确的。

更新了jQuery

必须在每个页面的div中添加一个id。然后检查id是否存在。如果不存在，则上传页面。如果它在那里，只需使用当前页面内容。

    $('.category').on('click', '.kite-btn', function(e) {
        if ($('#kitechk').length){                                                                                              
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }else {                                                     
            $("#kite-in").load("/wp-content/themes/child/kite_page.php");
            $("#kite-x").load("/wp-content/themes/child/notelike_kite_page.php");                                       
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
            alert('finish')
        }
    });

JQuery：Checkbox在按钮之间切换时不会保持Checked

2 个答案: