如何根据单选按钮显示和隐藏字段

Question

我有一个单选按钮问题，答案是是或否。我需要显示和隐藏下一个字段取决于单选按钮的答案，如果是，则显示该字段，如果不是，则将它们隐藏。

这是我的代码

<?php 
                    if(form_error('HSC')) 
                        echo "<div class='form-group has-error' >";
                    else     
                        echo "<div class='form-group' >";
                ?>
                    <label for="HSC" class="col-sm-2 control-label">
                        <?=$this->lang->line("student_have_hs")?>
                    </label>
                    <div class="col-sm-3">
                        <input type="radio" name="HSC" value="Yes">Yes<br> <input type="radio" name="HSC" value="No"> No<br> 
                    </div>
                    <span class="col-sm-4 control-label">
                        <?php echo form_error('HSC'); ?>
                    </span>
                </div>

                <?php 
                    if(form_error('student_date_of_graduate')) 
                        echo "<div class='form-group has-error' >";
                    else     
                        echo "<div class='form-group' >";
                ?>
                    <label for="student_date_of_graduate" class="col-sm-2 control-label">
                        <?=$this->lang->line("student_date_of_graduate")?>
                    </label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="student_date_of_graduate" name="student_date_of_graduate" value="<?=set_value('student_date_of_graduate')?>" >
                    </div>
                    <span class="col-sm-4 control-label">
                        <?php echo form_error('student_date_of_graduate'); ?>
                    </span>
                </div>

                <?php
                if(form_error('schoolname'))
                    echo "<div class='form-group has-error' >";
                else
                    echo "<div class='form-group' >";
                ?>
                    <label for="name_id" class="col-sm-2 control-label">
                       <?=$this->lang->line("student_schoolname")?>
                    </label>
                    <div class="col-sm-6">
                    <input type="text" class="form-control" id="schoolname" name="schoolname" value="<?=set_value('schoolname')?>" >
                    </div>
                    <span class="col-sm-4 control-label">
                        <?php echo form_error('schoolname'); ?>
                    </span>
                </div>

                <?php 
                    if(form_error('specialty')) 
                        echo "<div class='form-group has-error' >";
                    else     
                        echo "<div class='form-group' >";
                ?>
                    <label for="specialty" class="col-sm-2 control-label">
                        <?=$this->lang->line("student_specialty")?>
                    </label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="specialty" name="specialty" value="<?=set_value('specialty')?>" >
                    </div>
                    <span class="col-sm-4 control-label">
                        <?php echo form_error('specialty'); ?>
                    </span>
                </div>

                <?php 
                    if(form_error('average')) 
                        echo "<div class='form-group has-error' >";
                    else     
                        echo "<div class='form-group' >";
                ?>
                    <label for="average" class="col-sm-2 control-label">
                        <?=$this->lang->line("student_average")?>
                    </label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="average" name="average" value="<?=set_value('average')?>" >
                    </div>
                    <span class="col-sm-4 control-label">
                        <?php echo form_error('average'); ?>
                    </span>
                </div>

任何人都可以帮忙，因为我没有太多的javascript经验

Answer 1

这是使用 javascript 的基本示例：

单选按钮：

<input type="radio" name="HSC" value="Yes" onChange="getValue(this)">Yes<br> 
<input type="radio" name="HSC" value="No" onChange="getValue(this)"> No<br> 

在这里，我使用onchange() 事件来更改值。

你的部门：

<div id="yourfield" style="display:none;"> 
   Hide Me: Place your all four fields here
   student_date_of_graduate , 
   average , 
   schoolname and 
   specialty
</div>

您需要一个标识符 id="yourfield" 来执行更改，例如显示和隐藏特定的 div。

脚本：

<script type="text/javascript">
function getValue(x) {
  if(x.value == 'No'){
    document.getElementById("yourfield").style.display = 'none'; // you need a identifier for changes
  }
  else{
    document.getElementById("yourfield").style.display = 'block';  // you need a identifier for changes
  }
}
</script>

简单的javascript函数，仅用于根据单选按钮的值显示或隐藏你的div。

Answer 2

使用 jQuery ：

$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'your input id') {
    $('#div id').show();           
}

else {
    $('#div id').hide();   
}
});
});