Выбрать в зависимости от кнопки радио

Как я могу сделать <SELECT> видимым, если выбран конкретный <INPUT type="radio">?Выбрать в зависимости от кнопки радио

У меня есть следующие функции в конце <BODY>:

<script> 
$('[data-dependent]').each(function() { 
    var $ele = $(this); 
    var dependsOn = $ele.data('dependent'); 
    $.each(dependsOn, function (target, value) { 
     $(target).on('change', function() { 
      if($(this).val() === value) { 
       $ele.show(); 
      } 
      else { 
       $ele.hide(); 
      } 
     }); 
    }); 
}); 
</script>

Мой HTML является:

<input type="radio" name="itemOption" id="deleteAllItems" value="deleteAllItems">Delete items 
<input type="radio" name="itemOption" id="moveAllItems" value="moveAllItems" checked>Move items 

<select id="inputCategory" name="category" data-dependent='{"itemOption": "moveAllItems"}'> 
    <option>Choose a category to move the items to...</option> 
    <option>Category A</option> 
    <option>Category B</option> 
</select>

источник

2016-08-18 Simon Otter

Вам просто нужно заменить $(target) с $('[name="'+target+'"]'):

$('[data-dependent]').each(function() { 
 
    var $ele = $(this); 
 
    var dependsOn = $ele.data('dependent'); 
 
    $.each(dependsOn, function (target, value) { 
 
     $('[name="'+target+'"]').on('change', function() { 
 
      $ele.toggle($(this).val() === value); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="radio" name="itemOption" id="deleteAllItems" value="deleteAllItems">Delete items 
 
<input type="radio" name="itemOption" id="moveAllItems" value="moveAllItems" checked>Move items 
 

 
<select id="inputCategory" name="category" data-dependent='{"itemOption": "moveAllItems"}'> 
 
    <option>Choose a category to move the items to...</option> 
 
    <option>Category A</option> 
 
    <option>Category B</option> 
 
</select>

источник

2016-08-18 16:41:33 blex

Может быть что-то вроде этого

jsFiddle

// add event listener for this group of radio inputs 
 
$('input[name="itemOption"]').on('change', function(){ 
 
    // depending on the "checked" value of #moveAllItems, using a ternary operator set 
 
    // the css "display" to "inline-block" if it's checked, or "none" if unchecked 
 
    var show = ($('#moveAllItems').is(':checked')) ? 'inline-block' : 'none'; 
 
    $('#inputCategory').css({display: show}); 
 
})

#inputCategory{ display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="radio" name="itemOption" id="deleteAllItems" value="deleteAllItems" checked>Delete items 
 
<input type="radio" name="itemOption" id="moveAllItems" value="moveAllItems">Move items 
 

 
<select id="inputCategory" name="category" data-dependent='{"itemOption": "moveAllItems"}'> 
 
    <option>Choose a category to move the items to...</option> 
 
    <option>Category A</option> 
 
    <option>Category B</option> 
 
</select>

источник

2016-08-18 16:41:51

Во-первых, вы можете сделать select элемент, который будет скрыт с помощью CSS следующим образом:

#inputCategory { 
    display: none; 
}

Затем, вы можете зарегистрировать on click слушателя на радио-кнопки, которые вы хотите сделать выберите элемент появляться (в данном случае все кнопки радио):

$('input[type="radio"]').click(function(){ 
    $('#inputCategory').show(); // Show element 
});

См working JSFiddle

источник

2016-08-18 16:42:37

Выбрать в зависимости от кнопки радио

ответ

Смежные вопросы