Question

我有两个类别列出性别和品牌。第一类

<ul>
  <li><input type="checkbox" id="checkboxa" class="chkbox" value="url.php?gender=children" name="gender"> Kid</li>
  <li><input type="checkbox" id="checkboxb" class="chkbox" value="url.php?gender=male" name="gender"> Male</li>
<li><input type="checkbox" id="checkboxc" class="chkbox" value="url.php?gender=female" name="gender"> Female</li>
</ul>

第二类

<ul>
  <li><input type="checkbox" id="checkbox1" class="chkbox" value="url.php?barnd=brand1" name="brand"> Brand1</li>
  <li><input type="checkbox" id="checkbox2" class="chkbox" value="url.php?barnd=brand2" name="brand"> Brand2</li>
  <li><input type="checkbox" id="checkbox3" class="chkbox" value="url.php?barnd=brand3" name="brand"> Brand3</li>
  <li><input type="checkbox" id="checkbox4" class="chkbox" value="url.php?barnd=brand4" name="brand"> Brand4</li>
</ul>

这是我的js：

<script>
$(document).ready(function() {
$('.chkbox').on('change', function() {
if ($(this).is(':checked')) {
  var url = $(this).val();
  console.log(url);

  window.location = url;
}
});
});
</script>

现在，当检查一个项目时，我的页面正在重新加载。我想只在选中每个类别的一个项目时才重新加载页面。 Plz帮助...... 在此先感谢.....

PS：url应该像url.php？brand = $ brand＆amp;＆amp; gender = $ gender $： - 已检查

Answer 1

将您的if条件更改为

.val("")

OneSignal.inFocusDisplayType = OSNotificationDisplayType.none

if($("input[name='gender']:checked").length && $("input[name='brand']:checked").length) {
  var url = $(this).val();    
  window.location = url;
}

Answer 2

以下是摘录。

＆＃13;

$(document).ready(function() {
  $('#fcat .chkbox').on('change', function() {
    if ($(this).is(':checked')) {
      var url = $(this).val();
      if ($(this).is(':checked')) {
        if ($('.cat').is(':checked')) {
          alert(url);
          window.location = url;
        }else{
          alert('Select gender!');
        }
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type="checkbox" id="checkboxa" class="cat" value="url.php?gender=children" name="gender"> Kid</li>
  <li><input type="checkbox" id="checkboxb" class="cat" value="url.php?gender=male" name="gender"> Male</li>
<li><input type="checkbox" id="checkboxc" class="cat" value="url.php?gender=female" name="gender"> Female</li>
</ul>

<ul id="fcat">
  <li><input type="checkbox" id="checkbox1" class="chkbox" value="url.php?barnd=brand1" name="brand"> Brand1</li>
  <li><input type="checkbox" id="checkbox2" class="chkbox" value="url.php?barnd=brand2" name="brand"> Brand2</li>
  <li><input type="checkbox" id="checkbox3" class="chkbox" value="url.php?barnd=brand3" name="brand"> Brand3</li>
  <li><input type="checkbox" id="checkbox4" class="chkbox" value="url.php?barnd=brand4" name="brand"> Brand4</li>
</ul>

＆＃13;

如果您选中性别复选框并选择品牌，则会重新加载您的品牌位置，然后返回提醒以选择性别优先。希望这能帮到你！

问候！

Answer 3

<ul>
  <li><input type="checkbox" id="checkboxa" class="chkbox chkType1" value="url.php?gender=children" name="gender"> Kid</li>
  <li><input type="checkbox" id="checkboxb" class="chkbox chkType1" value="url.php?gender=male" name="gender"> Male</li>
<li><input type="checkbox" id="checkboxc" class="chkbox chkType1" value="url.php?gender=female" name="gender"> Female</li>
</ul>
<ul>
  <li><input type="checkbox" id="checkbox1" class="chkbox chkType2" value="url.php?barnd=brand1" name="brand"> Brand1</li>
  <li><input type="checkbox" id="checkbox2" class="chkbox chkType2" value="url.php?barnd=brand2" name="brand"> Brand2</li>
  <li><input type="checkbox" id="checkbox3" class="chkbox chkType2" value="url.php?barnd=brand3" name="brand"> Brand3</li>
  <li><input type="checkbox" id="checkbox4" class="chkbox chkType2" value="url.php?barnd=brand4" name="brand"> Brand4</li>
</ul>

和javascript：

    <script>
    $(document).ready(function() {
    $('.chkbox').on('change', function() {
    if ($(this).is(':checked')) {

    if(($('.chkType1').length > 0 && $('.chkType2').length > 0))
     {
        var url = $(this).val();

url += '?brand='+$($('.chkType1')[0]).val()+'&&gender=' + $($('.chkType2')[0]).val();

        console.log(url);

      window.location = url;
    }
    }
    });
    });
    </script>

多个类别复选框

3 个答案: