How to send id of a checked checkboxes which contains categories to ajax and show subcategories related to that checked checkbox?

huangapple
go评论90阅读模式
英文:

How to send id of a checked checkboxes which contains categories to ajax and show subcategories related to that checked checkbox?

问题

I am successfully send checkbox value which is id of a category when checkbox is checked and show subcategories on the same page related to selected subcategory but I have a problem when click on multiple categories and again unchecked one of the category all subcategories goes undisplay. I want to undisplay the subcategory of only unchecked category when I check and uncheck the values anytime. here is my code hope you get my point thank you

Ajax

  1. <script>
  2. function showUser(str) {
  3.   if (str == "") {
  4.     document.getElementById("txtHint").innerHTML = "";
  5.     return;
  6.   } else {
  7.     var xmlhttp = new XMLHttpRequest();
  8.     xmlhttp.onreadystatechange = function() {
  9.       if (this.readyState == 4 && this.status == 200) {
  11.         document.getElementById("txtHint").innerHTML += this.responseText;
  12.     
  13.       }
  14.     };
  16.     
  17.     xmlhttp.open("POST","getsubcat.php?q="+str,true);
  18.     xmlhttp.send();
  19.     
  20.   }
  21. }
  22. </script>

JQuery

  1. <script>
  2. $(function() {
  3.     $('input[type=checkbox]').on('change', function() {
  4.     if($(this).is(':checked')) {
  5.         showUser($(this).val());
  6.     }   
  7.     else {       
  8.         showUser("");
  9.     }
  10. });
  11. </script>

Category Checkboxes

  1. <?php          
  2. foreach($cat as $row) {
  3. ?> 
  4. <input class="messageCheckbox" type="checkbox" id="check" value="<?php echo $row["id"]; ?>">
  5. <label for="check"><?php echo $row["name"]; ?></label>
  6. <?php
  7. }
  8. ?>
  9. <br>
  10. <div id="txtHint"><b></b></div>

getsubcat.php

  1. <?php
  2. $q = intval($_GET['q']);
  3. $result = $link->query("SELECT * FROM subcat WHERE cat_id = '".$q."'");
  4. ?>
  5. <div class="checkbox">
  6. <?php
  7. while($row = mysqli_fetch_array($result)) {
  8. ?>
  9. <input type="checkbox" id="sub_cat" name="sub_cat" value="<?php echo $row['subcat']; ?>">
  10. <label for="sub_cat"> <?php echo $row['subcat']; ?></label><br>
  11. <?php 
  12. }
  13. ?>
英文:

I am successfully send checkbox value which is id of a category when checkbox is checked and show subcategories on thee same page related to selected subcategory but I have a problem when click on multiple categories and again unchecked one of the category all subcategories goes un display. I want to un display the subcategory of only unchecked category when I check and uncheck the values anytime. here is my code hope you get my point thank you

**Ajax **

  1. &lt;script&gt;
  2. function showUser(str) {
  3.   if (str == &quot;&quot;) {
  4.     document.getElementById(&quot;txtHint&quot;).innerHTML = &quot;&quot;;
  5.     return;
  6.   } else {
  7.     var xmlhttp = new XMLHttpRequest();
  8.     xmlhttp.onreadystatechange = function() {
  9.       if (this.readyState == 4 &amp;&amp; this.status == 200) {
  11.         document.getElementById(&quot;txtHint&quot;).innerHTML += this.responseText;
  12.     
  13.       }
  14.     };
  16.     
  17.     xmlhttp.open(&quot;POST&quot;,&quot;getsubcat.php?q=&quot;+str,true);
  18.     xmlhttp.send();
  19.     
  20.   }
  21. }
  22. &lt;/script&gt;

J query

  1.  &lt;script&gt;
  2.          
  3.           $(function() {
  4.     //code here
  5.     $(&#39;input[type=checkbox]&#39;).on(&#39;change&#39;, function() {
  6.     if($(this).is(&#39;:checked&#39;)) {
  7.         showUser($(this).val());
  8.     }
  9.     
  10.     
  11.     else{
  12.         
  13.         showUser(&quot;&quot;);
  14.     }
  15. });
  16.           
  17.          
  18. });
  19.           
  20.       &lt;/script&gt;

category checkboxes

  1.   &lt;?php
  2.           
  3.           
  4.             foreach($cat as $row)
  5.             {
  6.                 
  7.             ?&gt; 
  8.            &lt;input class = &quot;messageCheckbox&quot; type = &quot;checkbox&quot; id = &quot;check&quot; value = &quot;&lt;?php echo $row[&quot;id&quot;]; ?&gt;&quot;&gt;
  9.            &lt;label for = &quot;check&quot;&gt;&lt;?php echo $row[&quot;name&quot;]; ?&gt;&lt;/label&gt;
  10.            
  11.            
  12.            &lt;?php
  13.             }
  14.            ?&gt;
  15.     
  16.     &lt;br&gt;
  17.     
  18.     &lt;div id=&quot;txtHint&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;

getsubcat.php

  1. &lt;?php
  2. $q = intval($_GET[&#39;q&#39;]);
  5. $result = $link-&gt;query(&quot;SELECT *
  6. FROM subcat WHERE cat_id = &#39;&quot;.$q.&quot;&#39;&quot;);
  8. ?&gt;
  9. &lt;div class = &quot;checkbox&quot;&gt;
  10.     
  11. &lt;?php
  12. while($row = mysqli_fetch_array($result)) {
  13.     
  14. ?&gt;
  16. &lt;input type=&quot;checkbox&quot; id=&quot;sub_cat&quot; name=&quot;sub_cat&quot; value=&quot;&lt;?php echo $row[&#39;subcat&#39;]; ?&gt;&quot;&gt;
  17. &lt;label for=&quot;sub_cat&quot;&gt; &lt;?php echo $row[&#39;subcat&#39;];  ?&gt;&lt;/label&gt;&lt;br&gt;
  19. &lt;?php 
  20. }
  23. ?&gt;

I am trying to solve with j query code attached but when I checked checkbox it displayed the subcategories of all checked checkboxes but when un check any of the box this will un display all the subcategories

答案1

得分: 0

问题在于，当取消选中任何复选框时，您会清除所有内容：

  1. function showUser(str) {
  2.   if (str == "") {
  3.     document.getElementById("txtHint").innerHTML = "";
  4.     return;
  5.   }
  6.   ...
  7. }
  8. $('input[type=checkbox]').on('change', function() {
  9.     if($(this).is(':checked')) {
  10.         showUser($(this).val());
  11.     }
  12.     else{
  13.         showUser("");
  14.     }

要解决此问题，您需要以某种方式识别具有给定 cat_id 的元素，例如，您可以添加数据属性：

  1. <input type="checkbox" id="sub_cat" name="sub_cat" value="<?php echo $row['subcat']; ?>" data-cat="<?php echo $q ?>">
  2. <label for="sub_cat" data-cat="<?php echo $q ?>"> <?php echo $row['subcat']; ?></label><br>

当您想取消选中复选框时，您可以使用该数据属性查找要删除的元素：

  1. function hideUser(str) {
  2.    $('[data-cat="' + str + '"]').remove();
  3. }
  5. $('input[type=checkbox]').on('change', function() {
  6.     const user = $(this).val();
  7.     if($(this).is(':checked')) {
  8.         showUser(user);
  9.     } else{
  10.         hideUser(user);
  11.     }
  12. });
英文:

The problem is that you literally clear everything when uncheck any checkbox:

  1. function showUser(str) {
  2.   if (str == &quot;&quot;) {
  3.     document.getElementById(&quot;txtHint&quot;).innerHTML = &quot;&quot;;
  4.     return;
  5.   }
  6.   ...
  7. }
  8. $(&#39;input[type=checkbox]&#39;).on(&#39;change&#39;, function() {
  9.     if($(this).is(&#39;:checked&#39;)) {
  10.         showUser($(this).val());
  11.     }
  12.     
  13.     
  14.     else{
  15.         
  16.         showUser(&quot;&quot;);
  17.     }

To solve the issue you need to identify somehow the elements that have given cat_id, e.g. you can add data attribute:

  1. &lt;input type=&quot;checkbox&quot; id=&quot;sub_cat&quot; name=&quot;sub_cat&quot; value=&quot;&lt;?php echo $row[&#39;subcat&#39;]; ?&gt;&quot; data-cat=&quot;&lt;?php echo $q ?&gt;&quot;&gt;
  2. &lt;label for=&quot;sub_cat&quot; data-cat=&quot;&lt;?php echo $q ?&gt;&quot;&gt; &lt;?php echo $row[&#39;subcat&#39;];  ?&gt;&lt;/label&gt;&lt;br&gt;

and when you want to uncheck the checkbox you can find elements you want to remove using that data attribute:

  1. function hideUser(str) {
  2.    $(&#39;[data-cat=&quot;&#39; + str + &#39;&quot;]&#39;).remove();
  3. }
  5. $(&#39;input[type=checkbox]&#39;).on(&#39;change&#39;, function() {
  6.     const user = $(this).val();
  7.     if($(this).is(&#39;:checked&#39;)) {
  8.         showUser(user);
  9.     } else{
  10.         hideUser(user);
  11.     }
  12. });

huangapple
  • 本文由 发表于 2023年6月19日 05:22:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/76502577.html
  • ajax
  • checkbox
  • javascript
  • jquery
  • php
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定