2016-04-02 8 views
2

Ich habe eine Tabelle in der Datenbank wie folgt aus:(php/jquery) und ausgeblendet Kontrollkästchen nach einem anderen geprüft Checkbox Wert

------------------------------ 
| ID_1   | ID_2  | 
------------------------------ 
| A   | 1   | 
| A   | 2   | 
| A   | 3   | 
| B   | 1   | 
| B   | 2   | 
| B   | 5   | 
| C   | 1   | 
| C   | 4   | 
| C   | 3   | 
------------------------------ 

und ich habe einige Kontrollkästchen für ID_1 wie diese

<input class="ID_1" type="checkbox" value="A"> 
<input class="ID_1" type="checkbox" value="B"> 
<input class="ID_1" type="checkbox" value="C"> 

Ich versuche das zu tun, jedes Mal, wenn ich das Kontrollkästchen ID_1 ankreuze, wird das Kontrollkästchen ID_2 angezeigt, hängt von der Checkbox ID_1 ab, die ich gemäß der obigen Tabelle überprüft habe. so, wenn ich zwei Kontrollkästchen aktiviert

<input class="ID_1" type="checkbox" value="A" checked> 
<input class="ID_1" type="checkbox" value="B" checked> 
<input class="ID_1" type="checkbox" value="C"> 

es wird wie folgt zeigen:

<input class="ID_2" type="checkbox" value="1"> 
<input class="ID_2" type="checkbox" value="2"> 
<input class="ID_2" type="checkbox" value="3"> 
<input class="ID_2" type="checkbox" value="5"> 

ist das möglich jquery verwenden? Ich brauche Ihre Hilfe bitte

+3

gleichen ID auf jedem Element ??? Es ist schlecht schlecht schlecht, stattdessen Klasse verwenden .... –

+0

sollte es so sein? Billy

+0

Nach der Verwendung von Klassen anstelle von IDs. Erstellen Sie ein Ereignis für alle Kontrollkästchen. Mache einen Ajax-Aufruf auf einer PHP-Seite, nachdem alle Kontrollkästchen geändert wurden, um alle Kontrollkästchen auf die PHP-Seite zu übertragen. Die PHP-Seite fragt die Datenbank ab und gibt die eindeutigen Werte zurück, wo Sie sie mit jquery auf der Seite anzeigen. –

Antwort

0

Dies ist möglich mit jquery, müssen Sie alle Kontrollkästchen anzeigen und Klasse statt Id verwenden. Ich arbeite gerade an einer Lösung die Post einmal posten wird.

Hier ist die funktionierende Lösung für Sie. Sie können dies einfach in einem Skript hinzufügen und im Browser ausführen.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!DOCTYPE html > 
 
<html> 
 
    <head> 
 
     <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script> 
 
     
 
     <script type="text/javascript"> 
 
      $('document').ready(function() { 
 
       //OBJECT OF ARRAY WITH YOUR DESIRED VALUES FROM DATABASE, THIS COULD BE MADE DYNAMICALLY 
 
       var id1Obj = { A:['1','2','3'], B:['1','2','5'], C:['1','3','4'] }; 
 

 
       $('.ID_1').click(function() { 
 
        
 
        $('.ID_2').hide(); 
 
        jQuery('.ID_1:checked').each(function(index) { 
 
          
 
         var valId1CheckboxVal = $(this).val();       
 
         
 
         jQuery('.ID_2').each(function(index) { 
 
          
 
          
 
          if($.inArray($(this).val(), id1Obj[valId1CheckboxVal]) != -1) 
 
          { 
 
           $(this).show(); 
 
          } 
 
          else 
 
          { 
 
//        console.info("flse for " + $(this).val()); 
 
//        console.log($(this)); 
 
          } 
 
         }); 
 
        }); 
 
        
 
       }); 
 
       
 
       
 
       
 

 
      }); 
 
     </script> 
 
    </head> 
 
    <body> 
 

 
     <div style="width:100%"> 
 
      <label>ID_1 checkboxes</label><br> 
 
      <input class="ID_1" type="checkbox" value="A"> A<br> 
 
      <input class="ID_1" type="checkbox" value="B"> B<br> 
 
      <input class="ID_1" type="checkbox" value="C"> C<br> 
 
      
 
      <br> 
 
      
 
      
 
     </div> 
 
     <br> 
 
     <div style="width:100%"> 
 
      <label>ID_2 checkboxes</label><br> 
 
      
 
      <input class="ID_2" type="checkbox" value="1">1 <br> 
 
      <input class="ID_2" type="checkbox" value="2">2 <br> 
 
      <input class="ID_2" type="checkbox" value="3">3 <br> 
 
      <input class="ID_2" type="checkbox" value="4">4 <br> 
 
      <input class="ID_2" type="checkbox" value="5">5 <br> 
 
     </div> 
 
     
 
    </body> 
 
</html>

+0

es ist meine schlechte Verwendung ID als Klasse :) danke, ich schätze es – Billy

+0

danke! Ich werde versuchen, auf meinen Code :) – Billy

+0

@Billy Sie können klicken Sie auf "Code-Snippet unter meiner Antwort ausführen und versuchen Sie auf Kontrollkästchen. Up Abstimmung, wenn es funktioniert. – shivgre

Verwandte Themen