Question

我正在为学校做一个项目，我需要使用jQuery创建一个产品选择器！但不幸的是，我不能让它发挥作用！

正如您所看到的，在开始时，我需要将所有产品展示在div中; 然后当我们检查check1时，隐藏所有不同的产品以显示具有属性check1的产品列表; 与check2相同; 然后（最重要的部分）检查两者时，显示具有两个属性的不同产品列表！

我不确定，但我认为问题出在那个部分：

function myFunction()
  {
if ($("#check1").is(':checked'))
  {
  $(".results").hide();
  $("#check1result").show();
  }
}

function myFunction()
{
if ($("#check2").is(':checked'))
  {
  $(".results").hide();
  $("#check2result").show();
  }
}

function myFunction()
{
if ($("#check1").is(':checked'), $("#check2").is(':checked'))
  {
 $(".results").hide();
  $("#check1et2result").show();
  }
}

但我找不到它！

非常感谢任何帮助：）

Answer 1

这么多拼写错误和错误：

myFunction可以使用所有逻辑定义一个而不定义第三个
$("#check1).is(':checked'))有语法错误，请检查浏览器控制台是您的终身朋友
and运算符为&&而非,
您可以在jQuery中注册单击处理程序而不是内联onclick，依此类推

在此处查看基本信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript和http://learn.jquery.com

代码：

function myFunction() {
    $(".results").show();
    $("#check1et2result, #check1result, #check2result").hide();
    if ($("#check1").is(':checked') && $("#check2").is(':checked')) {
        $(".results").hide();
        $("#check1et2result").show();
    } else {
        if ($("#check1").is(':checked')) {
            $(".results").hide();
            $("#check1result").show();
        }
        if ($("#check2").is(':checked')) {
            $(".results").hide();
            $("#check2result").show();
        }
    }
}

演示：http://jsfiddle.net/DBEww/

Answer 2

您只能定义一次myFunction（）。也没有myFunction（），你可以使用jquery click事件。这是小提琴：http://jsfiddle.net/rda9Q/4/

另外，不要忘记在左侧菜单中包含jquery库。

这是HTML：

<input type="checkbox" id="check1">Check1<br>
<input type="checkbox" id="check2">Check2<br>
<button id="button">Filter</button>
<div id="mainresult" class="results">
<p>All the products</p>
</div>
<div id="check1result" class="results" style="display:none;">
<p>The products with the specific spec Check1</p>
</div>
<div id="check2result" class="results" style="display:none;">
<p>The products with the specific spec Check2</p>
</div>
<div id="check1et2result" class="results" style="display:none;">
<p>Products with both specs Check 1 and 2</p>
</div>

以下是剧本：

 $('#button').on('click',function(){
    if($("#check1").is(':checked') && $("#check2").is(':checked')){
         $(".results").hide();
           $("#check1result").show();
           $("#check2result").show();
        /*
          OR IF YOU STILL WANT TO USE SPECIFIC DIV FOR BOTH RESULTS
          $("#check1et2result").show();
        */   
    }
     else if ($("#check1").is(':checked'))
      {
          $(".results").hide();
          $("#check1result").show();
      }
     else if ($("#check2").is(':checked'))
      {
          $(".results").hide();
          $("#check2result").show();
      }
    else{
        $(".results").hide();
    }
});

Answer 3

您也可以尝试直接在复选框更改上执行某些操作，而不使用以下按钮：

HTML：

<input type="checkbox" id="check1" class="checkbox">Check1<br>
<input type="checkbox" id="check2" class="checkbox">Check2<br>

<div id="mainresult" class="results all">
<p>All the products</p>
</div>
<div id="check1result" class="results check1" style="display:none;">
<p>The products with the specific spec Check1</p>
</div>
<div id="check2result" class="results check2" style="display:none;">
<p>The products with the specific spec Check2</p>
</div>
<div id="check1et2result" class="results check1check2" style="display:none;">
<p>Products with both specs Check 1 and 2</p>
</div>

JQuery的：

$('.checkbox').change(function(){
    var className = '';
    $('.checkbox:checked').each(function(){
        className += $(this).attr('id');
    });

    if(className.length == 0)
        className = 'all';

    $('div').hide();
    $('div.' + className).show();
});

小提琴 - ＆gt;＆gt; http://jsfiddle.net/rda9Q/5/

有多个复选框，如何制作产品选择器？

3 个答案: