Question

基本上我有几个字段类似于下面的代码字段集类＆＃34;取决于＆＃34;最初隐藏在视野之外。我正在寻找的是如果用户选择是（类options_check），那么类＆＃34;取决于＆＃34;将会呈现。我可以得到所有的课程＆＃34;取决于＆＃34;显示何时单击是，但我只想一次显示。我希望有道理。这是我到目前为止，但现在，但它不起作用。提前感谢我指导我正确的方向。

$(document).ready(function(){
    $('.depends').hide();
$('.options_check').click(function(){
    //If Options_check is Clicked
    if($(this).is(':checked')){
        $(this).parent('.radio_options').children('.depends').show();
        }
    });

});


<fieldset class="radio_options">
    <label for="siblings">Do You Have Any Siblings ?: <em>*</em></label>
    <fieldset>
        <label for="yes_siblings">Yes I have siblings</label>
        <input class="options_check" name="siblings" type="radio" value="yes I have siblings" <?php if(isset($_POST['siblings']) && $_POST['siblings'] == 'yes I have siblings') echo 'checked="checked"'; ?>>
    </fieldset>
    <fieldset>
        <label for="no_siblings">No siblings</label>
        <input name="siblings" type="radio" value="no siblings"<?php if(isset($_POST['siblings']) && $_POST['siblings'] == 'no siblings') echo 'checked="checked"'; ?>>
    </fieldset>
    <fieldset class="depends">
        <label for="how_many_siblings">How Many Siblings ? <em>*</em></label>
        <?php howManySiblings($grades); ?>
    </fieldset>
</fieldset>
<!--END SIBLINGS-->

<fieldset class="radio_options">
    <label for="lived_in_english_country">Have You Ever Lived in an English Speaking Country: <em>*</em></label>
    <fieldset>
        <label for="yes_english_country">Yes I have lived in a English speaking country</label>
        <input class="options_check" name="lived_in_english_country" type="radio" value="I have lived in an English country"<?php if(isset($_POST['lived_in_english_country']) && $_POST['lived_in_english_country'] == 'I have lived in an English country') echo 'checked="checked"'; ?>>
    </fieldset>
    <fieldset>
        <label for="no_english_country">No I have not lived in a English speaking country</label>
        <input name="lived_in_english_country" type="radio" value="no I have not lived in an English country" <?php if(isset($_POST['lived_in_english_country']) && $_POST['lived_in_english_country'] == 'no I have not lived in an English country') echo 'checked="checked"'; ?>>
    </fieldset>
    <fieldset class="depends">
        <label for="which_english_country">Which Country/Countries ? <em>*</em></label>
        <input name="which_english_country" type="text" value="<?php echo $which_english_country ?>">
    </fieldset>
    <fieldset class="depends">
        <label for="how_long_in_english_country">How Long <em>*</em></label>
        <input name="how_long_in_english_country" type="text" value="<?php echo $how_long_in_english_country ?>">
    </fieldset>
</fieldset>
          <!--END ENGLISH SPEAKING COUNTRY-->

Answer 1

首先，我建议将depends字段集的显示样式设置为无。这意味着它开始时是不可见的，并且在这里比在javascript加载时更好。更好的方法是在外部CSS文件中添加display:none;到fieldset.depends。

<fieldset class="depends" style="display:none;">
    <label for="how_many_siblings">How Many Siblings ? <em>*</em></label>
    <?php howManySiblings($grades); ?>
</fieldset>

然后，在jQuery方面，我认为最好的方法是在外部字段集上监听change事件。然后，您可以查看是否已选中输入，如果是，则切换depends字段集。这是代码：

$('fieldset.radio_options').change(function(e){
    var yesChecked = $(this).find('input.options_check').is(':checked');
    var dependsFieldset = $(this).children('fieldset.depends');
    dependsFieldset.toggle(yesChecked);
});

这是JSFiddle。

Answer 2

这是工作代码jsfiddle

HTML：

<fieldset class="radio_options">
<label for="siblings">Do You Have Any Siblings ?: <em>*</em></label>
<fieldset>
    <label for="yes_siblings">Yes I have siblings</label>
    <input class="options_check" name="siblings" type="radio" value="yes I have siblings" >
</fieldset>
<fieldset>
    <label for="no_siblings">No siblings</label>
    <input name="siblings" class="options_check" type="radio"  >
</fieldset>
<fieldset class="depends">
    <label for="how_many_siblings">How Many Siblings ? <em>*</em></label>
    <?php howManySiblings($grades); ?>
</fieldset>

使用Javascript：

如果选中单选按钮，则隐藏和显示子项

2 个答案: