选择依赖于单选按钮

Select dependent on Radio Button

本文关键字：单选按钮 依赖于 选择      更新时间：2023-09-26

如果选择了特定的<INPUT type="radio">，我如何使<SELECT>可见?

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

您只需将$(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>

首先，您可以使用以下CSS隐藏select元素:

#inputCategory {
  display: none;
}

然后，您可以在希望显示select元素的单选按钮(在本例中为所有单选按钮)上注册on click侦听器:

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

见working JSFiddle

可能是这样的

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>

相关文章：