Question

如果选择了特定的<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>

Answer 1

您只需将$(target)替换为$('[name="'+target+'"]')：

＆＃13;

$('[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);
        });
    });
});

＆＃13;

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

＆＃13;

Answer 2

也许是这样的

jsFiddle

＆＃13;

// 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});
})

＆＃13;

#inputCategory{ display:none; }

＆＃13;

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

＆＃13;

Answer 3

首先，您可以使用CSS隐藏<Grid> <Grid.RowDefinitions> <RowDefinition x:Name="row1"/> <RowDefinition x:Name="row2"/> </Grid.RowDefinitions> <Rectangle Grid.RowSpan="2" Fill="#FFF4F4F5" Stroke="Black" Width="56"/> <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FF757576" Stroke="Black" Width="56"/> </Grid>元素，如下所示：

row1.Height = new GridLength(2, GridUnitType.Star); // 2/5
row2.Height = new GridLength(3, GridUnitType.Star); // 3/5

然后，您可以在要使select元素出现的单选按钮上注册select侦听器（在本例中为所有单选按钮）：

#inputCategory {
  display: none;
}

参见 working JSFiddle

选择依赖于单选按钮

3 个答案: