单击单选按钮jQuery时隐藏文本区域

Question

I'm doing a questionnaire that has several questions, each question has its own options, I need to make a code jquery to hide the text area with the label "Question Options" when therefore selected the radiobuttons "Date, Location, Single Selection, Multiple selection, on / Off "of the question concerned.

So if I'm in question 5, and select "Multiple Selection" then the "text area" with the label "Question Options" should be hidden only in that question.

See Questionnaire

Note: each <TD> is added dynamically, so there is more than one.

 <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

I hope this is what you are looking for. I fixed some stuff in your HTML, they weren't correctly placed and some were missing.

Also, you have many IDs with same name multiple times, not recommended. Use classes instead, or else conflicts in the DOM can happen, if you work with Javascript or CSS. I fixed some of these, so that jQuery can handle it.

And don't increment the names like form-question-0 , it all can be done by catching the index.

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
I added an event so that the textarea shows up again if you click on that label. If you don't need it, just delete the options.click() part.

// 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:
I forgot, you wanted this action happen only in the currently active question. There you go.

demo

Answer 2

Solve my problem and put here my code if anyone serves:

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