Auswahl der äußeren div basierend auf inneren Eingangstyp

Question

Ich habe folgende html für einen Benutzer eingegebenen Informationen, wenn Sie ein neues Konto registriert:

<span class="label"><label for="id_email">Email address:</label></span> 
    <div class="editable-input-box-container"><input id="id_email" maxlength="254" name="email" type="email" /></div> 

<span class="label"><label for="id_phone_number">Phone Number:</label></span> 
    <div class="editable-input-box-container"><input id="id_phone_number" name="phone_number" type="text" /></div> 
    <p class="help-text">xxx-xxx-xxxx</p> 

<span class="label"><label for="id_can_help">Can provide extra help:</label></span> 
    <div class="editable-input-box-container"><input id="id_can_help" name="can_help" type="checkbox" /></div> 
    <p class="help-text">Would you be willing to provide your help if needed?</p> 

Was zur Zeit ist eine schöne Anmeldemaske angezeigt:

Aber das Kontrollkästchen ist nach links ausgerichtet, wenn ich stattdessen möchte, dass es rechts neben dem Titel "Kann zusätzliche Hilfe bieten:". Allerdings, wenn ich die Checkbox

input[type="checkbox"] 

in meinem CSS wählen, richtet es nur das Eingangselement und rechts ausgerichtet ist es innerhalb des div, das Recht nicht auf der Seite auszurichten. Gibt es eine Möglichkeit, das äußere editierbare Eingabefeld-Container-Div auszuwählen, basierend auf der inneren Eingabe, die ein Typ-Kontrollkästchen ist, so dass ich es richtig ausrichten kann?

Answer 1

Sie können mit jQuery und die parent() Funktion:

$("input[type='checkbox']").parent().css("display","inline");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="label"><label for="id_email">Email address:</label></span> 
 
<div class="editable-input-box-container"><input id="id_email" maxlength="254" name="email" type="email" /></div> 
 

 
<span class="label"><label for="id_phone_number">Phone Number:</label></span> 
 
<div class="editable-input-box-container"><input id="id_phone_number" name="phone_number" type="text" /></div> 
 
<p class="help-text">xxx-xxx-xxxx</p> 
 

 
<span class="label"><label for="id_can_help">Can provide extra help:</label></span> 
 
<div class="editable-input-box-container"><input id="id_can_help" name="can_help" type="checkbox" /></div> 
 
<p class="help-text">Would you be willing to provide your help if needed?</p>