單擊單選按鈕jQuery時隱藏文本區域

Question

我正在做一個包含幾個問題的問卷，每個問題都有其自己的選項，因此需要選擇一個代碼jquery來隱藏帶有“問題選項”標簽的文本區域，因此選擇了“日期，位置，單選”單選按鈕，多項選擇，打開/關閉“有關問題。

因此，如果我在問題5中，並選擇“多重選擇”，則標簽“問題選項”的“文本區域”應僅在該問題中隱藏。

見問卷

注意：每個<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> 

Answer 1

我希望這是您要尋找的。 我修復了您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);
});

編輯：
我忘記了，您希望此操作僅在當前活動的問題中發生。 妳去

演示

Answer 2

解決我的問題，如果有人提供，請將我的代碼放在這里：

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