2017-02-09 7 views
0

Wie kann ich den div "container" auswählen, wenn das Kontrollkästchen in "myCheck" aktiviert ist?
Ich benutze das jquery print area plugin, also im Grunde, wenn das Kontrollkästchen aktiviert ist, muss ich das Container-Div auswählen, so dass der Code etwa wie $ aussehen sollte (". MyCheck input: checked> div"). PrintArea();Wählen Sie div, wenn das Kontrollkästchen aktiviert ist.

Hier ist mein HTML:

<div class="content"> 
     <div class = "myCheck"><input type="checkbox" /> 
      <div class = "container"> 
       <img src="https://www.kent.ac.uk/graduateschool/images/email-thumbnail.jpg" alt="My new Image"> 
      </div> 
      </div> 
     </div> 

Ich habe versucht, den > Selektor, aber es scheint nicht zu funktionieren:

diese
alert($(".myCheck input:checked > div").printArea() 

auch versucht:

alert($(".myCheck input:checked").children()).printArea() 
+1

was meinst du alles? – imudin07

+0

Suchen Sie nach einem Ereignis-Listener in dem Kontrollkästchen, um die Funktion auszuführen, oder erwarten Sie, nur den Status des Kontrollkästchens zu überprüfen, wenn das Skript ausgeführt wird? –

+1

Auch das 'input' Element hat keine Kinder, daher ist' input> div' falsch als Selektor. –

Antwort

2

Sie könnte .next()

0 verwenden

$('input').on('change', function(){ 
 
    console.log($(".myCheck input:checked").next().html()); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class = "myCheck"><input type="checkbox" /> 
 
    <div class = "container"> 
 
     <img src="//placehold.it/50" alt="My new Image"> 
 
    </div> 
 
    </div> 
 
</div>

+1

würde sauberer aussehen, wenn Ziel spezifische Eingabe – charlietfl

+0

@charlietfl Sie sind sehr richtig. Ich könnte '$ (this) .filter (': checked'). Next()' verwenden, aber da der Event-Listener nur für die Demo ist, kann ich nicht sicher sein, dass die Eingabe der Kontext dessen ist, wo OP möchte Führe den Code aus. Diese Antwort zeigt nur, dass OP die Methode '.next()' verwenden sollte, um ein später auftretendes benachbartes Geschwister auszuwählen. –

+0

right aber umgekehrt würde auch an jedem Eingang in der Seite ausgelöst werden. Einfach eine Notiz machen, damit OP sich dessen bewusst ist – charlietfl

0

jQuery verwenden Sie können dieses verwenden, für den geprüften Wert:

$('.myCheck').prop('checked', true); 

Und Sie können sich wahrscheinlich eine Callback-Funktion verwenden, um den Behälter zu wählen:

$('.myCheckbox').is(':checked', function(e){ 
    e.preventDefault(e); 
    $('container').theMethodYouWantToUse 
}); 

Hoffnung es hilft dir

0

Führen Sie das folgende Beispiel aus, aktivieren und deaktivieren Sie die Komponente, ich hoffe, es hilft!

Grundsätzlich verwende ich einfache Callback für Checkbox-Klicks, steuern ihren Zustand und wählen den Inhalt, wenn die Komponente aktiviert ist.

// Waiting for DOM load 
 
$(document).ready(function() { 
 

 
    // Callback for checkbox's click 
 
    $(".myCheck > input[type='checkbox']").on("click", function() { 
 

 
    // Setting the container variable as null 
 
    var container = null; 
 
    
 
    // Checking if the checkbox is "checked" 
 
    if ($(this).is(":checked")) { 
 

 
     // Selecting the container node object, so you can use it as you want 
 
     var container = $(".container"); 
 
     
 
     // Console warnings 
 
     console.info("Container selected, the checkbox must be checked!"); 
 
     console.log("Some test information from container: " + $(container).find('span').html()); 
 

 
    } else { 
 

 
     // Console warnings 
 
     console.info("Container not selected, the checkbox must be checked!"); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="myCheck"> 
 
     <input type="checkbox" /> 
 
     <div class = "container"> 
 
      <span>Some example content..</span> 
 
     </div> 
 
    </div> 
 
</div>

Verwandte Themen