Ausblenden eines Textfelds, wenn ich auf ein Optionsfeld klicke jquery

Ich mache einen Fragebogen, der mehrere Fragen enthält, jede Frage hat ihre eigenen Optionen, ich muss einen Code erstellen, um den Textbereich mit der Beschriftung "Frageoptionen" auszublenden wenn Sie also die Radiobuttons "Datum, Ort, Einzelauswahl, Mehrfachauswahl, An/Aus" der betreffenden Frage ausgewählt haben.Ausblenden eines Textfelds, wenn ich auf ein Optionsfeld klicke jquery

Also, wenn ich in Frage 5 bin, und wählen Sie "Mehrfachauswahl", dann sollte der "Textbereich" mit der Bezeichnung "Fragenoptionen" nur in dieser Frage ausgeblendet werden.

See Questionnaire

Hinweis: Jeder <TD> wird dynamisch hinzugefügt, so dass es mehr als eine.

<table id="field-easy-form-question-values"> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="2" class="field-label">Question</th> 
 
     <th>Order</th> 
 
    </tr>   
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="" id="form-question-0"> 
 
      <div class="form-item"> 
 
       <label for="form-question-0" class="">Question text</label> 
 
       <input class="js-text-full" id="question-0-fielde" name="field_easy_form_question[0][field_easy_form_question_text][0][value]" value="Nombre" type="text">    
 
      </div> 
 
     </div> 
 
     <div class="" id="edit-field-easy-form-question-0"> 
 
      <div class="form-item"> 
 
      <label for="edit-field-easy-form-question-0" class="">Question Options</label> 
 
      <div class="form-textarea-wrapper"> 
 
       <textarea class="js-text-full" name="field_easy_form_question[0][field_easy_form_question_options][0][value]"></textarea> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="" id="form-question-0"> 
 
      <div id="edit-field-easy-form-question-0"> 
 
      <div class="panel-heading"> 
 
       <div class="panel-title">Type</div> 
 
       </div>    
 

 
       <div class="panel-body"> 
 
       <div id="edit-field-easy-form-question-0"> 
 
        <div class="form-item radio"> 
 
        <label for="form-question-0" class="option"> 
 
        <input class="form-radio" id="type-short-text" name="field_easy_form_question[0][field_easy_form_question_type]" value="Short Text" checked="checked" type="radio">Short Text</label> 
 
        </div> 
 

 
        <div class="form-item radio"> 
 
        <label for="edit-field-easy--field-easy-form-question-type-long-text" class="option"> 
 
        <input class="form-radio" id="type-long-text" name="field_easy_form_question[0][field_easy_form_question_type]" value="Long Text" type="radio">Long Text</label>  
 
        </div> 
 

 
        <div class="form-item radio"> 
 
        <label for="edit-field-easy-form-question-0-field-easy-form-question-type-date" class="option"> 
 
        <input class="form-radio" id="type-date" name="field_easy_form_question[0][field_easy_form_question_type]" value="Date" type="radio">Date</label> 
 
        </div> 
 
              
 
        <div class="form-item radio"> 
 
        <label for="edit-field-easy-form-question-0-field-easy-form-question-type-location" class="control-label option"> 
 
        <input class="form-radio" id="type-location" name="field_easy_form_question[0][field_easy_form_question_type]" value="Location" type="radio">Location</label> 
 
        </div> 
 
        
 
        <div class="form-item radio"> 
 
        <label for="edit-field-easy-form-question-0-field-easy-form-question-type-single-selection" class="control-label option"> 
 
        <input class="form-radio" id="type-single-selection" name="field_easy_form_question[0][field_easy_form_question_type]" value="Single Selection" type="radio">Single Selection</label> 
 
        </div> 
 
       </div> 
 
     </div></div> 
 
     </td>   
 
     </tr> 
 
     <tr> 
 
     <td>...</td> 
 
     </tr> 
 
     <tr> 
 
     <td>...</td>   
 
     </tr> 
 
    </tbody> 
 
</table>

Quelle

2016-10-18 nashCode

Ich hoffe, das ist das, was Sie suchen. Ich habe ein paar Sachen in deinem HTML korrigiert, sie waren nicht richtig platziert und einige fehlten.

Sie haben auch viele IDs mit dem gleichen Namen mehrmals, nicht empfohlen. Verwenden Sie stattdessen Klassen, oder es können Konflikte im DOM auftreten, wenn Sie mit Javascript oder CSS arbeiten. Ich habe einige davon behoben, damit jQuery damit umgehen kann.

Und nicht die Namen wie form-question-0 inkrementieren, kann alles durch Abfangen des Index getan werden.

HTML

<table id="field-easy-form-question-values"> 
    <thead> 
    <tr> 
     <th colspan="2" class="field-label">Question</th> 
     <th>Order</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div class="form-question"> 
      <div class="form-item"> 
      <label for="form-question-0" class="">Question text</label> 
      <input class="js-text-full question-0-fielde" name="field_easy_form_question[0][field_easy_form_question_text][0][value]" value="Nombre" type="text"> 
      </div> 
     </div> 
     <div class="edit-field-easy-form-question-0"> 
      <div class="form-item"> 
      <label for="edit-field-easy-form-question-0" class="question-options">Question Options</label> 
      <div class="form-textarea-wrapper"> 
       <textarea class="js-text-full" name="field_easy_form_question[0][field_easy_form_question_options][0][value]"></textarea> 
      </div> 
      </div> 
     </div> 

     <div class="form-question-0"> 
      <div class="edit-field-easy-form-question-0"> 
      <div class="panel-heading"> 
       <div class="panel-title">Type</div> 
      </div> 

      <div class="panel-body"> 
       <div id="edit-field-easy-form-question-0"> 
       <div class="form-item radio"> 
        <label for="form-question-0" class="option"> 
        <input class="form-radio type-short-text" name="field_easy_form_question[0][field_easy_form_question_type]" value="Short Text" checked="" type="radio">Short Text</label> 
       </div> 

       <div class="form-item radio"> 
        <label for="edit-field-easy--field-easy-form-question-type-long-text" class="option"> 
        <input class="form-radio type-long-text" name="field_easy_form_question[0][field_easy_form_question_type]" value="Long Text" type="radio">Long Text</label> 
       </div> 

       <div class="form-item radio"> 
        <label for="edit-field-easy-form-question-0-field-easy-form-question-type-date" class="option"> 
        <input class="form-radio type-date" name="field_easy_form_question[0][field_easy_form_question_type]" value="Date" type="radio">Date</label> 
       </div> 

       <div class="form-item radio"> 
        <label for="edit-field-easy-form-question-0-field-easy-form-question-type-location" class="control-label option"> 
        <input class="form-radio type-location" name="field_easy_form_question[0][field_easy_form_question_type]" value="Location" type="radio">Location</label> 
       </div> 

       <div class="form-item radio"> 
        <label for="edit-field-easy-form-question-0-field-easy-form-question-type-single-selection" class="control-label option"> 
        <input class="form-radio type-single-selection" name="field_easy_form_question[0][field_easy_form_question_type]" value="SingleSelection" type="radio">Single Selection</label> 
       </div> 

       <div class="form-item radio"> 
        <label for="edit-field-easy-form-question-0-field-easy-form-question-type-multi-selection" class="control-label option"> 
        <input class="form-radio type-multi-selection" name="field_easy_form_question[0][field_easy_form_question_type]" value="MultipleSelection" type="radio">Multiple Selection</label> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </td> 
    </tr> 
    <tr> 
     <td>...</td> 
    </tr> 
    <tr> 
     <td>...</td> 
    </tr> 
    </tbody> 
</table>

jQuery
ich ein Ereignis hinzugefügt, so dass das Textfeld wieder auftaucht, wenn Sie auf diesem Label klicken. Wenn Sie es nicht brauchen, löschen Sie einfach den options.click() Teil.

// aliases 
var multi = $('.type-multi-selection'), 
    txtarea = $('textarea.js-text-full'), 
    options = $('.question-options'); 

function hideOptions(clk,el) { // wrapped in a function 
    var clicked = clk, 
    idx = clicked.index(el), 
    txt = txtarea.eq(idx); 
    clk == multi ? txt.hide() : txt.show(); 
}; 

// hides the textarea when clicked on "Multiple Selection" 
multi.click(function() { 
    hideOptions(multi,this); 
}); 
// this shows up again if you click the label for the hidden textarea 
options.click(function() { 
    hideOptions(options,this); 
});

EDIT:
Ich habe vergessen, Sie wollten diese Aktion nur in der aktuell aktiven Frage geschehen. Da gehst du.

demo

Quelle

2016-10-18 19:22:16 Thielicious

Danke für Sie helfen, aber für mich nicht funktionieren, Ihr Code funktioniert aber mehr Bedingungen für mich brauchte, aber ich schätze deine Führung. – nashCode

Np, danke, dass ich meine Zeit verschwendet habe. – Thielicious

mein Problem ist zu lösen und hier meinen Code setzen, wenn jemand dient:

(function($) { 
$(document).ready(function(){ 

    jQuery('.field--name-field-easy-form-question-options').hide(); 

    jQuery("input:radio").each(function (e) { 
     var $this = $(this); 
     if (this.checked) { 
        var id = $this.attr('id'); 
        var valor = $this.val(); 


        if (valor == 'Single Selection' || valor == 'Multiple Selection') { 

         jQuery($this.parents('td').find('.field--name-field-easy-form-question-options').show()); 
        } 
     } 
    }); 

    jQuery('#field-easy-form-question-values tr input').on('change', function(e) { 
     if (e.target.value != "Multiple Selection" && e.target.value != "Single Selection"){ 
       jQuery(e.target).parents('td').find('.field--name-field-easy-form-question-options').hide(); 

     } else{ 
      jQuery(e.target).parents('td').find('.field--name-field-easy-form-question-options').show(); 

     } 
    }); 
});})(jQuery);

Quelle

2016-10-21 14:25:17 nashCode

Ausblenden eines Textfelds, wenn ich auf ein Optionsfeld klicke jquery

Antwort

Verwandte Themen