Bei CHECKBOX Bestätigung Textfarbe ändern

[peterpan19]

Hallo, ich hoffe ihr könnt mir dabei helfen. Ich würde gerne die CHECKBOX z.B. zur Bestätigung der AGB beim Anklicken die Textfarbe ändern. Also Checkbox nicht betätigt, Textfarbe rot, bestätigt Textfarbe grün. Alternativ könnte ich mir auch ein entsprechenden Hintergrund vorstellen, also roter bzw. grüner Hintergrund. Hab's bisher, wie so oft, leider nicht hinbekommen. 
Danke und Gruß

Linkback: https://www.modified-shop.org/forum/index.php?topic=17673.0

[h-h-h]

Hier mal ein Ansatz mit jQuery:

Code: Javascript  [Auswählen]

$(document).ready(function(){
    $("#id-für-den-text").css("color","red");
    $("[name='conditions']").click(function(){
        if ($("[name='conditions']").is(":checked")) {
            $("#id-für-den-text").css("color","green");
        } else {
            $("#id-für-den-text").css("color","red");
        }
    });
});

Gruß

h-h-h

[peterpan19]

Ok, ich habe den Code in die "jquery.js" eingefügt, so:

Code: Javascript  [Auswählen]

 $(document).ready(function(){
    $("#textrot").css("color","red");
    $("[name='conditions']").click(function(){
        if ($("[name='conditions']").is(":checked")) {
            $("#textgruen").css("color","green");
        } else {
            $("#textrot").css("color","red");
        }
    });
});

Dann entsprechend 2 neue css Dateien im Ordner "/templates/xtc5/css/" eingefügt. Aber da fehlt noch was, es verändert sich gar nichts. Alternativ habe ich die #textrot und #textgruen in die "javascript.css" eingefügt, auch nichts. Kann man denn nichts mit dem Code in der "checkout_payment.php" anfangen:

Code: PHP  [Auswählen]

        if (isset ($_GET['step']) && $_GET['step'] == 'step2') {
                $smarty->assign('AGB_checkbox', '<input type="checkbox" value="conditions" name="conditions" checked />');
        } else {
                $smarty->assign('AGB_checkbox', '<input type="checkbox" value="conditions" name="conditions" />');
        }

[GTB]

h-h-h hat dir einen funktionierenden Code gepostet. Jetzt brauchst du ihn nur noch richtig einbauen.

Gruss Gerhard

[h-h-h]

general.js.php

Code: PHP  [Auswählen]

<?php if (strpos($PHP_SELF, FILENAME_CHECKOUT_PAYMENT )) { ?>
<script type="text/javascript">
/* <![CDATA[ */
    $(document).ready(function(){
        $("label[for='conditions']").css("color","red");
        $("[name='conditions']").attr('id', 'conditions');
        $("[name='conditions']").click(function(){
            if ($("[name='conditions']").is(":checked")) {
                $("label[for='conditions']").css("color","green");
            } else {
                $("label[for='conditions']").css("color","red");
            }
        });
    });
/*]]>*/
</script>
<?php } ?>

checkout_payment.html

Code: PHP  [Auswählen]

<strong>{#text_accept_agb#}</strong>

ersetzen mit

Code: PHP  [Auswählen]

<label for="conditions">{#text_accept_agb#}</label>

Sieht richtig gut aus und der Text lässt sich auch anklicken.

Gruß

h-h-h

[wiitool4you]

Vielen Dank dafür.

Nur eines noch.
Dieser Code

Code: PHP  [Auswählen]

<strong>{#text_accept_agb#}</strong>

befindet sich nicht in der "checkout_payment.php", sondern in der "checkout_payment.html".

Gruß Micha

[Tomcraft]

Da hast du Recht, ich habe es mal korrigiert.

Grüße

Torsten

[peterpan19]

SUUUUPEEEEER, eine Kleinigkeit, aber doch nicht ganz unsinnig, wie ich finde. DAAAAANKEEEEE 

[MW]

Sieht wirklich gut aus h-h-h, schick auch mit dem anklickbaren Text.

[peterpan19]

Hallo, ich habe den Code etwas erweitert, geht jetzt auch für "Ich akzeptiere Ihre Datenschutzrichtlinien! [Mehr]" bei create-account.php und create_guest_account.php. In der Datei shop\templates\deintemplate\javascript\general.js.php den Code so erweitern:

Code: PHP  [Auswählen]

<?php if (strpos($PHP_SELF, FILENAME_CREATE_ACCOUNT )) { ?>
<script type="text/javascript">
/* <![CDATA[ */
    $(document).ready(function(){
        $("label[for='privacy']").css("color","red");
        $("[name='privacy']").attr('id', 'privacy');
        $("[name='privacy']").click(function(){
            if ($("[name='privacy']").is(":checked")) {
                $("label[for='privacy']").css("color","green");
            } else {
                $("label[for='privacy']").css("color","red");
            }
        });
    });
/*]]>*/
</script>
<?php } ?>
<?php if (strpos($PHP_SELF, FILENAME_CREATE_GUEST_ACCOUNT )) { ?>
<script type="text/javascript">
/* <![CDATA[ */
    $(document).ready(function(){
        $("label[for='privacy']").css("color","red");
        $("[name='privacy']").attr('id', 'privacy');
        $("[name='privacy']").click(function(){
            if ($("[name='privacy']").is(":checked")) {
                $("label[for='privacy']").css("color","green");
            } else {
                $("label[for='privacy']").css("color","red");
            }
        });
    });
/*]]>*/
</script>
<?php } ?>

In shop\templates\deintemplate\module\create_account.html suche:

Code: PHP  [Auswählen]

<td width="100%"><strong>&nbsp;{#text_privacy_accept#}</strong> {$PRIVACY_LINK}</td>

und ersetze:

Code: PHP  [Auswählen]

<td width="100%"><strong>&nbsp;<label for="privacy">{#text_privacy_accept#}</label></strong> {$PRIVACY_LINK}</td>

Das gleiche für create_guest_account.html.
Für manche mag es nur Spielerei sein, aber es sieht verdammt gut aus 
Nochmals Danke an h-h-h, für den Grundcode!

[h-h-h]

  

Code: PHP  [Auswählen]

    <?php // checkbox selection effect
  if (strpos($PHP_SELF, FILENAME_CREATE_ACCOUNT) ||
      strpos($PHP_SELF, FILENAME_CREATE_GUEST_ACCOUNT) ||
      strpos($PHP_SELF, FILENAME_CHECKOUT_PAYMENT) ) {
  ?>
    <script type="text/javascript">
    /* <![CDATA[ */
        $(document).ready(function(){
      <?php if (strpos($PHP_SELF, FILENAME_CHECKOUT_PAYMENT)) { ?>
            $("label[for='conditions']").css("color","red");
            $("[name='conditions']").attr('id', 'conditions');
            $("[name='conditions']").click(function(){
                if ($("[name='conditions']").is(":checked")) {
                    $("label[for='conditions']").css("color","green");
                } else {
                    $("label[for='conditions']").css("color","red");
                }
            });
      <?php } else { ?>
            $("label[for='privacy']").css("color","red");
            $("[name='privacy']").attr('id', 'privacy');
            $("[name='privacy']").click(function(){
                if ($("[name='privacy']").is(":checked")) {
                    $("label[for='privacy']").css("color","green");
                } else {
                    $("label[for='privacy']").css("color","red");
                }
            });
      <?php } ?>
        });
    /*]]>*/
    </script>
  <?php
  }
  ?>

Wenn alle den gleichen Namen bekommen würden, wäre der Code ein bisschen kürzer. Wobei man es auch mit einer Schleife und automatischen Abfrage in jQuery/Javascript machen könnte.

Gruß

h-h-h

[peterpan19]

Noch besserer Beitrag 
Ist natürlich sehr viel eleganter und funktioniert einwandfrei  
Gruß
Frank

[gar85]

Ich habe noch ein Problem, wenn ich beim checkout bei 3 Boxen die Farbe ändern will. Nach zahlreichen Versuchen konnte ich das Problem aber nicht einkreisen, weil mir dafür php-Kenntnisse fehlen.

Bei den AGB's funktioniert der Algorithmus, bei Datenschutz und Widerrufsrecht wird die Zeile zwar rot, ändert sich nach demKlicken aber nicht auf grün.

Meine letzte Variante mal zur Anschauung:

Code: PHP  [Auswählen]

<?php if (strpos($PHP_SELF, FILENAME_CHECKOUT_PAYMENT )) { ?>
    <script type="text/javascript">
    /* <![CDATA[ */
        $(document).ready(function(){
            $("label[for='privacy']").css("color","red");
        $("[name='privacy']").attr('id', 'privacy');
        $("[name='privacy']").click(function(){
            if ($("[name='privacy']").is(":checked")) {
                $("label[for='privacy']").css("color","green");
            } else {
                $("label[for='privacy']").css("color","red");
                }
            });
        });
    /*]]>*/
    </script>
    <?php } ?>
       
         <?php if (strpos($PHP_SELF, FILENAME_CHECKOUT_PAYMENT )) { ?>
    <script type="text/javascript">
    /* <![CDATA[ */
        $(document).ready(function(){
            $("label[for='conditions']").css("color","red");
            $("[name='conditions']").attr('id', 'conditions');
            $("[name='conditions']").click(function(){
                if ($("[name='conditions']").is(":checked")) {
                    $("label[for='conditions']").css("color","green");
                } else {
                    $("label[for='conditions']").css("color","red");
                }
            });
        });
   /*]]>*/
    </script>
    <?php } ?>

         <?php if (strpos($PHP_SELF, FILENAME_CHECKOUT_PAYMENT )) { ?>
    <script type="text/javascript">
    /* <![CDATA[ */    
        $(document).ready(function(){
            $("label[for='withdrawal']").css("color","red");
            $("[name='withdrawal']").attr('id', 'withdrawal');
            $("[name='withdrawal']").click(function(){
                if ($("[name='conditions']").is(":checked")) {
                    $("label[for='withdrawal']").css("color","green");
                } else {
                    $("label[for='withdrawal']").css("color","red");
                }
            });
        });
    /*]]>*/
    </script>
    <?php } ?>

In der Checkout_payment.html sieht der Abschnitt so aus:

Code: XML  [Auswählen]

<h2>{#title_comments#}</h2>
<p class="checkoutcomment">{$COMMENTS}</p>
<h2>{#title_agb#}</h2>
<p class="checkoutagb">{$AGB}</p>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
  <tr>
    <td>{$AGB_checkbox}</td>
    <td width="100%"><label for="conditions">{#text_accept_agb#}</label></td>
  </tr>
</table>
<h2>{#title_withdrawal#}</h2>
 <p class="checkoutwithdrawal">{$WITHDRAWAL}</p>
  <table width="100%" border="0" cellspacing="0" cellpadding="4">
    <tr>
      <td>{$WITHDRAWAL_checkbox}</td>
      <td width="100%"><label for="withdrawal">{#text_accept_withdrawal#}</label></td>
   </tr>
  </table>
  <h2>{#title_DATA_PRIVACY#}</h2>
 <p class="checkoutDATA_PRIVACY">{$DATA_PRIVACY}</p>
  <table width="100%" border="0" cellspacing="0" cellpadding="4">
    <tr>
      <td>{$DATA_PRIVACY_checkbox}</td>
      <td width="100%"><label for="privacy">{#text_accept_DATA_PRIVACY#}</label></td>
   </tr>
  </table>

Vielleicht hat ja jemand einen Vorschlag?

Gruß aus dem sonnigen Süden

[h-h-h]

Code: XML  [Auswählen]

    <script type="text/javascript">
    /* <![CDATA[ */
       $(document).ready(function(){
           $("label[for='conditions']").css("color","red");
           $("[name='conditions']").attr('id', 'conditions');
           $("[name='conditions']").click(function(){
               if ($("[name='conditions']").is(":checked")) {
                   $("label[for='conditions']").css("color","green");
               } else {
                   $("label[for='conditions']").css("color","red");
               }
           });
           $("label[for='withdrawal']").css("color","red");
           $("[name='withdrawal']").attr('id', 'conditions');
           $("[name='withdrawal']").click(function(){
               if ($("[name='withdrawal']").is(":checked")) {
                   $("label[for='withdrawal']").css("color","green");
               } else {
                   $("label[for='withdrawal']").css("color","red");
               }
           });
           $("label[for='privacy']").css("color","red");
           $("[name='privacy']").attr('id', 'privacy');
           $("[name='privacy']").click(function(){
               if ($("[name='privacy']").is(":checked")) {
                   $("label[for='privacy']").css("color","green");
               } else {
                   $("label[for='privacy']").css("color","red");
               }
           });
       });
   /*]]>*/
    </script>

Gruß

h-h-h