ラジオボタンをクリックしたときにテキストエリアが表示されない

質問がいくつかあり、それぞれの質問に独自のオプションがあります。質問オプション "Question Options"でテキスト領域を非表示にするコードjqueryを作成する必要があります。関連する質問の「日付、場所、単一の選択、複数の選択、オン/オフ」のラジオボタンを選択したときに選択される。ラジオボタンをクリックしたときにテキストエリアが表示されない

質問5で「複数の選択」を選択すると、「質問オプション」というラベルの付いた「テキスト領域」はその質問でのみ非表示にする必要があります。

See Questionnaire

注：2つ以上が存在するように、各<TD>は、動的に追加されます。

<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>

出典

2016-10-18 nashCode

私は、これはあなたが探しているものであると思います。あなたのHTMLにいくつかのものを修正しました。それらは正しく配置されておらず、いくつかは欠落していました。

また、同じ名前のIDが複数回あることが推奨されていません。代わりにクラスを使用すると、JavascriptやCSSを使用している場合、DOMの競合が発生する可能性があります。私はこれらのいくつかを修正し、jQueryがそれを処理できるようにしました。

form-question-0のように名前を増やさないでください。インデックスをキャッチすることですべてを行うことができます。

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の
あなたはそのラベルをクリックするとテキストエリアが再び表示されるように、私はイベントを追加しました。必要がない場合は、options.click()部分を削除してください。

// 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：
私はあなたがこのアクションは、現在アクティブな問題にのみ発生たかった、忘れてしまいました。そこに行く。

demo

出典

2016-10-18 19:22:16 Thielicious

は、助けてあなたをありがとう、私にとって仕事をいけない、あなたのコードが機能しているが、私のためのより多くの条件が必要私はあなたの指導に感謝します。 – nashCode

Np、時間を無駄にしてくれてありがとう。 – Thielicious

私の問題を解決し、誰もがあります場合は、ここに私のコードを置く：

(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);

出典

2016-10-21 14:25:17 nashCode

ラジオボタンをクリックしたときにテキストエリアが表示されない

答えて

関連する問題