单击单选按钮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);