Wen zwei Radio Buttons Aktiviert sind Feld einblenden

Pludan

Grünschnabel
Hallo

Ich bin ein Anfänger und komme nicht mehr weiter.
Ich habe ein Formular, dabei werden die Passenden Felder eingeblendet wen das entsprechende Radio Button angeklickt wird. Nun gibt eine Anforderung vor das dass Feld Bemerkung nur unter zwei Bedingungen erscheinen darf. Da komme ich nicht mehr weiter.

Wen ein Radio Button angeklickt wird funktioniert dies ohne Probleme. Ich habe dies bisher so gemacht:

Die Felder mit CSS ausgeblendet.


Im javascript jeweils:

Javascript:
$(window).load(function() {
    $("body").fadeIn(1000);
});

$(document).ready(function() {

$('#tblnummer_uebernehmen').on('ifChecked', function() {
        $("#tblhandynummer_text").hide();
        $("#tblhandynummer").hide();
        bestehende_nummer_übernehmenaktiv = 1;
    });
    $('#tblneu_nummer').on('ifChecked', function() {
        $("#tblhandynummer_text").show();
        $("#tblhandynummer").show();
        neue_nummer_vergebenaktiv = 1;
    });

}

Das Feld mit der id tblbegruendung darf nur eingeblendet werden die Radio Button : id tblspm_ober_info und id tblzweitesgearet aktiviert sind.

Kann mir jemand helfen und sagen wie ich das machen kann ?

Vielen Dank
Beste Grüsse Daniel
 
Dies müsste es tun:
Code:
    <input type="radio" name="group1" id="tblspm_ober_info" />Bedingung 1
    <input type="radio" name="group1" />Don't care
    <input type="radio" name="group2" />Don't care
    <input type="radio" name="group2" id="tblzweitesgearet" />Bedingung 2
    <input type="text" id="tblbegruendung" />Begründung
    <script>
        $("#tblbegruendung").hide();
        function checkandactivate() {
            if ($("#tblspm_ober_info:checked").length > 0 && $("#tblzweitesgearet:checked").length > 0) {
                $("#tblbegruendung").show();
            } else {
                $("#tblbegruendung").hide();
            }
        }
        $("input[name='group1'], input[name='group2']").on("change", checkandactivate);
    </script>
 
Hallo Sempervivum

Vielen Dank für deine Hilfe.

Leider funktioniert dies nicht bei mir. Ich habe den Code auch unabhängig von meinem Formular getestet, dies hatte leider auch nicht funktioniert.

hast du noch eine Idee ?

Beste Grüsse Daniel
 
Ich habe den Code getestet und er hat funktioniert. Da Du selber schon jQuery verwendet hast, hast Du es sicher auch eingebunden. Am besten wäre es, wenn er online ist und Du die URL posten könntest.
 
Verstehe, dann geht es nicht. Teamviewer habe ich leider nicht. Dann poste am besten mal dein HTML und JS/jQuery. Hast Du in die Console gesehen?
 
Ja dies habe ich eingebunden.

Den Code habe ich wider gesäubert.


HTML:
<!DOCTYPE html>
<?php include("phpcode.php"); ?>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Antragsformular MDM</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link type="text/css" href="style.css" rel="stylesheet" type="text/css">
    <link type="text/css" href="../libraries/jquery-ui.css" rel="stylesheet">
    <link type="text/css" href="htmlframe.css" rel="stylesheet" media="screen" />
    <link type="text/css" href="../libraries/flat/green.css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="../libraries/jquery-1.10.2.js"></script>
    <script type="text/javascript" charset="utf-8" src="../libraries/jquery-ui.js"></script>
    <script type="text/javascript" charset="utf-8" src="../libraries/jquery.placeholder.js"></script>
    <script type="text/javascript" charset="utf-8" src="../libraries/jquery.icheck.js"></script>
    <script type="text/javascript" charset="utf-8" src="script.js"></script>
    <script>
        $(document).ready(function(){
         $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
         });
        });
    </script>
</head>
<body>
<div id="pleasewait"><br><br>Das Antragsformular wird auf Ihre Mail gesendet<br> Bitte haben Sie einen Moment Geduld...</div>
<div id="container" class="clearfix">
<!--Logo-->
<img id="logo" src="../bilder/pdgr_logo.png" /><br><br><br>
    <div id="nav">
                <h3>Antragsformular MDM</h3>
    </div>
    <div id="main">
        <div class="content">
            <div id="informationen">
                Mit diesem Formular können Sie den Antrag stellen.<br><br>
                <h4>Wichtig:</h4>
                Sie erhalten nach dem Absenden des Formulars eine E-Mail. Drucken Sie dieses bitte aus, unterzeichnen Sie es und lassen sie es anschliessend falls gefordert, unterzeichnen.<br> 
                Das unterzeichnete Formular senden Sie bitte an die PDGR Informatik (helpdesk@pdgr.ch). </a><br><br><br>
                <button class="eingabefelder" id="weiter_zu_formular" >Weiter zum Antragsformular</button>
            </div>
            <form onsubmit="return chkformular()" id="submitform" action="redirect.php" enctype="multipart/form-data" name="newuser" method="post">
                <div id="formular"><br><br>

                    <table style="width: 910px;">
                        <tr>
                            <td><h4>Personalien</h4></td>
                        </tr>
                        <tr>
                            <td>Antragsformular für:</td>
                            <td><select name='antrag_fuer' id='antrag_fuer'><option value=''>Antragsformular für*</option><?php echo $ad_namen ?></select></td>
                        </tr>
                        <tr>
                            <td>Unternehmenseinheit:</td>
                            <td><select name='departement' id='departement'><option value=''>Unternehmenseinheit*</option><?php echo $departement ?></select></td>
                        </tr>
                    </table><br>
                        <tr>
                            <td>Wählen Sie bitte Ihre Funktionsart:</td>
                        </tr><br><br>
                    <table align=center style="width: 800px;">
                        <tr>
                            <td id="tblgescheaftsleitung"><input type="radio" name="funktionsart_radio" value="gescheaftsleitung" class="tblgescheaftsleitung"></td><td>Geschäftsleitung</td>
                            <td id="tblspm_ober_info"><input type="radio" name="funktionsart_radio" value="spm_oberarzt_ma_informatik" class="tblspm_ober_info"></td><td>SPM / Oberarzt / MA Informatik</td>
                            <td id="tbluebrige_funktionen"><input type="radio" name="funktionsart_radio" value="uebrige_funktionen" class="tbluebrige_funktionen"></td><td>Übrige Funktionen</td>
                        </tr>
                    </table>
                    <table style="width: 910px;">
                        <tr>
                            <td><br></td>
                        </tr>
                        <tr>
                            <td><h4>Gerätebedarf</h4></td>
                        </tr>
                        <tr>
                            <td width=325px  >BYOD = Bring your own device:</td>
                            <td id="tblbyod"><input type="radio" name="gearetebedarf_radio" value="bestehende_nummer_übernehmen" class="tblbyod"></td>
                        </tr>
                        <tr>
                            <td>Erstgerät:</td>
                            <td id="tblerstgearet"><input type="radio" name="gearetebedarf_radio" value="Erstgerät" class="tblerstgearet"></td>
                        </tr>
                        <tr>
                            <td>Zweitgerät:</td>
                            <td id="tblzweitesgearet"><input type="radio" name="gearetebedarf_radio" value="Zweitgerät" class="tblzweitesgearet"></td>
                        </tr>
                        <tr>
                            <td><br></td>
                        </tr>
                        <tr>
                            <td id="tblipad_text">Ipad:</td>
                            <td id="tblipad"><input type="radio" name="geared_typ_radio" value="IPad" class="tblipad"></td>
                        </tr>
                        <tr>
                            <td id="tbliphone_text">Iphone:</td>
                            <td id="tbliphone"><input type="radio" name="geared_typ_radio" value="IPhone" class="tbliphone"></td>
                        </tr>
                        <tr>
                            <td><br></td>
                        </tr>
                        <tr>
                            <td id="tblnummer_uebernehmen_text">Bestehende Nummer übernehmen:</td>
                            <td id="tblnummer_uebernehmen"><input type="radio" name="geared_radio" value="bestehende_nummer_übernehmen" class="tblerstgeared"></td>
                        </tr>
                        <tr>
                            <td id="tblneu_nummer_text">Neue Nummer Vergeben:</td>
                            <td id="tblneu_nummer"><input type="radio" name="geared_radio" value="neue_nummer_vergeben" class="tblerstgeared"></td>
                        </tr>
                        <tr>
                            <td id="tblhandynummer_text">Geben Sie bitte Ihr Handynummer ein:</td>
                            <td id="tblhandynummer"><input autocomplete="off" type="text" name="handynummer" maxlength="50" class="eingabefelder"  placeholder="Handynummer*" /></td>
                        </tr>
                        <tr>
                            <td id="tblhandynummer_text">Geben Sie bitte Ihr Handynummer ein:</td>
                            <td id="tblhandynummer"><input autocomplete="off" type="text" name="handynummer" maxlength="50" class="eingabefelder"  placeholder="Handynummer*" /></td>
                        </tr>
                        <tr>
                            <td id="tblhandynummer_byod_text">Geben Sie bitte Ihr Handynummer ein:</td>
                            <td id="tblhandynummer_byod"><input autocomplete="off" type="text" name="handynummer_byod" maxlength="50" class="eingabefelder"  placeholder="Handynummer*" /></td>
                        </tr>
                        <tr>
                            <td id="tblbegruendung_text">Geben Sie bitte eine Begründung an</td>
                            <td id="tblbegruendung"><textarea  name="begruendung" placeholder="Begründung" class="begruendung" style="font-family: Calibri; rows="10",;></textarea></td> 
                        </tr>
                    </table><br><br>
                    <div id="tblnutzungsvereinbarung_mail"><h4>Nutzungsvereinbarung</h4><br><br>1.Ich bestätige die Richtlinien der PDGR (Reglement Smartphones und Tablets) in Bezug auf Benutzung und Sicherheit zu befolgen. Das Reglement kann jederzeit angepasst werden.<br><br>2.Ich nehme zur Kenntnis dass die PDGR die Sicherheitseinstellungen auf mein persönliches Endgerät erzwingen wird und die geschäftlichen Daten verschlüsselt übertragen werden.<br><br>3.Ich verstehe, dass ich für die persönlichen Daten und deren Sicherung alleine verantwortlich bin. Die PDGR haftet nicht für Verluste oder Diebstahl der Geräte. Der Nutzer ist sich bewusst, dass in einem solchen Fall die persönlichen Daten gelöscht werden.<br><br>4.Wird das Betriebssystem eines Endgerätes modifiziert (Bsp. "rooting", jailbreak-ing" etc.) wird das Gerät ohne Vorwarnung aus dem PDGR Managment System entfernt.<br><br>5.Ich akzeptiere, dass die PDGR gewisse Apps, die auf sensitive Geschäftsdaten zugreifen und in fremden Netzen verteilen können, unverzüglich sperren kann.<br><br>6.Ich nehme zur Kenntnis, dass die Benutzung des mobilen Endgerätes im Ausland für Gesprächs- und Datenverkehr mit höheren Gebühren verrechnet wird. (Detail im Reglement)<br><br>7.Die Rechnung geht über den eigenen Vertrag an den Nutzer. Keine Entschädigung durch die PDGR.<br><br>8.Die Lizenzkosten gehen über die PDGR.</div><br><br>
                    <div id="tblnutzungsvereinbarung_gl"><h4>Nutzungsvereinbarung</h4><br><br>1.Ich bestätige die Richtlinien der PDGR (Reglement Smartphones und Tablets) in Bezug auf Benutzung und Sicherheit zu befolgen. Das Reglement kann jederzeit angepasst werden.<br><br>2.Ich nehme zur Kenntnis dass die PDGR die Sicherheitseinstellungen auf mein persönliches Endgerät erzwingen wird und die geschäftlichen Daten verschlüsselt übertragen werden.<br><br>3.Ich verstehe, dass ich für die persönlichen Daten und deren Sicherung alleine verantwortlich bin. Die PDGR haftet nicht für Verluste oder Diebstahl der Geräte. Der Nutzer ist sich bewusst, dass in einem solchen Fall die persönlichen Daten gelöscht werden.<br><br>4.Wird das Betriebssystem eines Endgerätes modifiziert (Bsp. "rooting", jailbreak-ing" etc.) wird das Gerät ohne Vorwarnung aus dem PDGR Managment System entfernt.<br><br>5.Ich akzeptiere, dass die PDGR gewisse Apps, die auf sensitive Geschäftsdaten zugreifen und in fremden Netzen verteilen können, unverzüglich sperren kann.<br><br>6.Ich nehme zur Kenntnis, dass die Benutzung des mobilen Endgerätes im Ausland für Gesprächs- und Datenverkehr mit höheren Gebühren verrechnet wird. (Detail im Reglement)<br><br>7.Alle Kosten gehen über die PDGR. Dem Nutzer wird keine Rechnung zugestellt.<br><br>8.Die Lizenzkosten gehen über die PDGR.</div><br><br>
                    <div id="tblnutzungsvereinbarung_gereat"><h4>Nutzungsvereinbarung</h4><br><br>1.Ich bestätige die Richtlinien der PDGR (Reglement Smartphones und Tablets) in Bezug auf Benutzung und Sicherheit zu befolgen. Das Reglement kann jederzeit angepasst werden.<br><br>2.Ich nehme zur Kenntnis dass die PDGR die Sicherheitseinstellungen auf mein persönliches Endgerät erzwingen wird und die geschäftlichen Daten verschlüsselt übertragen werden.<br><br>3.Ich verstehe, dass ich für die persönlichen Daten und deren Sicherung alleine verantwortlich bin. Die PDGR haftet nicht für Verluste oder Diebstahl der Geräte. Der Nutzer ist sich bewusst, dass in einem solchen Fall die persönlichen Daten gelöscht werden.<br><br>4.Wird das Betriebssystem eines Endgerätes modifiziert (Bsp. "rooting", jailbreak-ing" etc.) wird das Gerät ohne Vorwarnung aus dem PDGR Managment System entfernt.<br><br>5.Ich akzeptiere, dass die PDGR gewisse Apps, die auf sensitive Geschäftsdaten zugreifen und in fremden Netzen verteilen können, unverzüglich sperren kann.<br><br>6.Ich nehme zur Kenntnis, dass die Benutzung des mobilen Endgerätes im Ausland für Gesprächs- und Datenverkehr mit höheren Gebühren verrechnet wird. (Detail im Reglement)<br><br>7.Die Rechnung geht an den Nutzer. (Smartphone). Rückerstattung durch die PDGR. (gemäss Reglement)<br><br>8.Die Lizenzkosten gehen über die PDGR.</div><br><br>
                    <table align=center>
                        <tr>
                            <td><input type="hidden" name="send" value="1"/></td>
                            <td><input type="button" id="weiter_zu_formular4" value="Zurück" style="float: left;" class="eingabefelder" name="Zurück"</input></td>
                            <td><input type="submit" onclick="return chkformular();" id="submit" value="Senden" style="float: left;" class="eingabefelder" name="erfassen"/></input></td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Javascript:
//#################################################################################################################################################################
//Sobald die Seite Geladen wurde, diese einblenden
//#################################################################################################################################################################
$(window).load(function() {
    $("body").fadeIn(1000);
});

$(document).ready(function() {
//#################################################################################################################################################################
//Wenn die jeweilige Checkbox angekreuzt wurde, feld zum bearbeiten einblenden oder ausblenden  
//#################################################################################################################################################################   
    $('#tblerstgearet').on('ifUnchecked', function() { 
        $("#tblipad_text").hide();
        $("#tblipad").hide();
        $("#tbliphone_text").hide();
        $("#tbliphone").hide();
        erstgearedaktiv = 0;
    });
    $('#tblerstgearet').on('ifChecked', function() {
        $("#tblipad_text").fadeIn();
        $("#tblipad").fadeIn();
        $("#tbliphone_text").fadeIn();
        $("#tbliphone").fadeIn();
        $("#tblhandynummer_byod_text").hide();
        $("#tblhandynummer_byod").hide();
        erstgearedaktiv = 1;
    });
    $('#tblzweitesgearet').on('ifUnchecked', function() { 
        $("#tblipad_text").hide();
        $("#tblipad").hide();
        $("#tbliphone_text").hide();
        $("#tbliphone").hide();
        zweitesgearetaktiv = 0;
    });
    $('#tblzweitesgearet').on('ifChecked', function() {
        $("#tblipad_text").fadeIn();
        $("#tblipad").fadeIn();
        $("#tbliphone_text").fadeIn();
        $("#tbliphone").fadeIn();
        $("#tblhandynummer_byod_text").hide();
        $("#tblhandynummer_byod").hide();
        zweitesgearetaktiv = 1;
    });
    $('#tblnummer_uebernehmen').on('ifChecked', function() {
        $("#tblhandynummer_text").hide();
        $("#tblhandynummer").hide();
        bestehende_nummer_übernehmenaktiv = 1;
    });
    $('#tblneu_nummer').on('ifChecked', function() {
        $("#tblhandynummer_text").show();
        $("#tblhandynummer").show();
        neue_nummer_vergebenaktiv = 1;
    });
    $('#tbliphone').on('ifChecked', function() {
        $("#tblneu_nummer_text").show();
        $("#tblneu_nummer").show();
        $("#tblnummer_uebernehmen_text").show();
        $("#tblnummer_uebernehmen").show();
        iphoneaktiv = 1;
    });
    $('#tblipad').on('ifChecked', function() {
        $("#tblneu_nummer_text").hide();
        $("#tblneu_nummer").hide();
        $("#tblnummer_uebernehmen_text").hide();
        $("#tblnummer_uebernehmen").hide();
        $("#tblhandynummer_text").hide();
        $("#tblhandynummer").hide();
        ipadaktiv = 1;
    });

    $('#tblbyod').on('ifChecked', function() {
        $("#tblhandynummer_byod_text").fadeIn();
        $("#tblhandynummer_byod").fadeIn();
        $("#tblneu_nummer_text").hide();
        $("#tblneu_nummer").hide();
        $("#tblnummer_uebernehmen_text").hide();
        $("#tblnummer_uebernehmen").hide();
        $("#tblhandynummer_text").hide();
        $("#tblhandynummer").hide();
        $("#tblipad_text").hide();
        $("#tblipad").hide();
        $("#tbliphone_text").hide();
        $("#tbliphone").hide();
        $("#tblbegruendung_text").hide();
        $("#tblbegruendung").hide();
/*         $("#tblbegruendung_text").hide();
        $("#tblbegruendung").hide(); */
        byodaktiv = 1;
    });
    $('#tblbyod').on('ifUnchecked', function() {
        $("#tblhandynummer_byod_text").hide();
        $("#tblhandynummer_byod").hide();
        byodaktiv = 0;
    });

//Seiten ein und ausblenden  

    $(function() {
        $("#formular").hide();
        $("#pleasewait").hide();
    });
    $( "#weiter_zu_formular" ).click(function() {
        $("#informationen").fadeIn();
        $("#formular").fadeIn();
    });
        $( "#weiter_zu_formular4" ).click(function() {
        $("#formular").hide();
        $("#informationen").fadeIn();
    });

 //Feldbeschriftung für ie 9 und älter
    $(function() {
        $('input, textarea').placeholder();
    });
});

$(function() {
    var tooltips = $("[title]").tooltip();
});

CSS:
* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
/*Felder beim laden der Seite ausblenden. Werden je nach dem später wieder eingeblendet*/
body,#tblnutzungsvereinbarung_mail, #tblnutzungsvereinbarung_gereat, #tblnutzungsvereinbarung_gl, #tblneu_nummer_text, #tblneu_nummer, #tblnummer_uebernehmen, #tblnummer_uebernehmen_text, #tblerstgeared, 
#tblhandynummer, #tblhandynummer_text, #tblhandynummer_byod, #tblhandynummer_byod_text, #tbliphone_text, #tbliphone, #tblipad_text, #tblipad, #tblbegruendung_text, #tblbegruendung, .erstgeared .zweite_vignette {
    display: none;
}
#logo {
    float:right;
    border:none;
    margin-bottom:15px;
    margin-right: 30px;
}
select, textarea {
    margin-top: 10px;
    margin-left: 5px;
    width: 290px;
    font-size: 17px;
}

h3{
    margin-top:20px;
}


.eingabefelder {
    margin-top: 10px;
    margin-left: 5px;
    width: 290px;
    font-size: 17px;
}

.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0 5px 0 0;
    background: url(checkbox.png) no-repeat;
    display: block;
    clear: left;
    float: left;
}

.placeholder{
    color: #989898;
}

.custom-combobox {

    position: relative;
    display: inline-block;

  }

  .custom-combobox-toggle {

    position: absolute;

    top: 0;

    bottom: 0;

    margin-left: -1px;

    padding: 0;

    /* support: IE7 */

    *height: 1.7em;

    *top: 0.1em;

  }

  .custom-combobox-input {

    margin: 0;

    padding: 0.3em;

  }

#dialogoverlay{
    display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;
    z-index: 10;
}
#dialogbox{
    display: none;
    position: fixed;
    background: #000;
    border-radius:7px; 
    width:550px;
    z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }

  label {
  display: inline-block; width: 5em;
}

  fieldset div {
  margin-bottom: 2em;
}

  fieldset .help {
  display: inline-block;
}

  .ui-tooltip {
  width: 180px;
}

.ui-widget-header {
    border: 1px solid white;
    background: none;
}


#pleasewait {
    width:500px;
    height:200px;
    position:absolute;
    top:40%;
    left:50%;
    background-color: white;
    margin-top:-100px;
    margin-left:-250px;
    z-index:  1;
    border:  1px solid black;
    font-family: Calibri;
    font-weight: bold;
    font-size:  21px;
}
 
Dies funktioniert bei mir:
Code:
            $("#tblbegruendung").hide();
            function checkandactivate() {
                if ($("#tblspm_ober_info input:checked").length > 0 && $("#tblzweitesgearet input:checked").length > 0) {
                    $("#tblbegruendung").show();
                } else {
                    $("#tblbegruendung").hide();
                }
            }
            $("input[name='funktionsart_radio'], input[name='gearetebedarf_radio']").on("change", checkandactivate);
Der Grund dafür, dass es nicht funktionierte, war, dass die IDs nicht die der Radiobuttons selber waren sondern die der übergeordneten Tabellenzelle. Hattest Du auch die Gruppennamen in der letzten Zeile angepasst?
 
Zurück