使用Jquery

Question

假设我有一个查询如下

$(".categoryCB").change(function(){

        if($(this).prop("checked") == true){
          var currentVal = $(this).val();
          $("#SqlQuerySpan2").append(" AND Category = " + currentVal);
        }
        else if($(this).prop("checked") == false)
        {
          $("#SqlQuerySpan2").text("");
        }

      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b>Search By Top Category</b></p>
<input type="checkbox" class="categoryCB" value="Silk Sarees">Silk Sarees
<input type="checkbox" class="categoryCB" value="Cotton Sarees">Cotton Sarees
<input type="checkbox" class="categoryCB" value="Designer Sarees">Designer Sarees
<input type="checkbox" class="categoryCB" value="Printed Sarees">Printed Sarees
                          
<br><hr>

<h4 id="SqlQuery">SELECT * FROM table WHERE city_id = 2<span id="SqlQuerySpan"></span> <span id="SqlQuerySpan2"></span></h4>

代码工作正常。但问题是我正在使用 jquery append 所以当我检查复选框时它会附加数据，但是当我取消选中复选框时，我想只删除属于的微管数据。

那么我该如何解决呢......

Answer 1

这样做的一种方法是替换像这样的值

$(".categoryCB").change(function(){

        if($(this).prop("checked")){
          var currentVal = $(this).val();
          $("#SqlQuerySpan2").append(" AND Category = " + currentVal);
        }
        else
        {
         var currentVal = $(this).val();
          var str = $("#SqlQuerySpan2").text();
          str = str.replace(" AND Category = " + currentVal,"");
          $("#SqlQuerySpan2").text(str);
        }

      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><b>Search By Top Category</b></p>
                          <p><input type="checkbox" class="categoryCB" value="Silk Sarees">Silk Sarees</p>
                          <p><input type="checkbox" class="categoryCB" value="Cotton Sarees">Cotton Sarees</p>
                          <p><input type="checkbox" class="categoryCB" value="Designer Sarees">Designer Sarees</p>
                          <p><input type="checkbox" class="categoryCB" value="Printed Sarees">Printed Sarees</p>
                          
<br><hr>

<h4 id="SqlQuery">SELECT * FROM table WHERE city_id = 2<span id="SqlQuerySpan"></span> <span id="SqlQuerySpan2"></span></h4>

P.S if($(this).prop("checked") == true)可以成为if($(this).prop("checked"))。这将返回true，您无需与true进行比较，else if(...)可以变为else

Answer 2

简单易用： - 只需更改其他条件即可。将未选中的复选框值替换为空白。

$(".categoryCB").change(function(){
  if($(this).prop("checked"))
    $("#SqlQuerySpan2").append(" AND Category = " + $(this).val());
  else
    $("#SqlQuerySpan2").text($("#SqlQuerySpan2").html().replace(" AND Category = " + $(this).val(), ""));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b>Search By Top Category</b></p>
<input type="checkbox" class="categoryCB" value="Silk Sarees">Silk Sarees
<input type="checkbox" class="categoryCB" value="Cotton Sarees">Cotton Sarees
<input type="checkbox" class="categoryCB" value="Designer Sarees">Designer Sarees
<input type="checkbox" class="categoryCB" value="Printed Sarees">Printed Sarees
<br><hr>
<h4 id="SqlQuery">SELECT * FROM table WHERE city_id = 2<span id="SqlQuerySpan"></span> <span id="SqlQuerySpan2"></span></h4>

Answer 3

您可以使用map方法从所有输入值创建数组，然后使用join方法从该数组中获取字符串。

＆＃13;

＆＃13;

$(".categoryCB").change(function() {
  let text = $('.categoryCB')
    .map(function() {
      return $(this).is(':checked') && $(this).val()
    }).get().filter(e => e).join(" AND Category = ")
  
  text = text.length ? " AND Category = " + text : ''
  $('#SqlQuerySpan2').text(text)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><b>Search By Top Category</b></p>
<p><input type="checkbox" class="categoryCB" value="Silk Sarees">Silk Sarees</p>
<p><input type="checkbox" class="categoryCB" value="Cotton Sarees">Cotton Sarees</p>
<p><input type="checkbox" class="categoryCB" value="Designer Sarees">Designer Sarees</p>
<p><input type="checkbox" class="categoryCB" value="Printed Sarees">Printed Sarees</p>

<br>
<hr>

<h4 id="SqlQuery">SELECT * FROM table WHERE city_id = 2<span id="SqlQuerySpan"></span> <span id="SqlQuerySpan2"></span></h4>

＆＃13;

＆＃13;

＆＃13;