javascript - 如果选中单选按钮，则在 Codeigniter 中显示 div

Question

我正在尝试创建一个用户表单，但我被困在其中，因为我希望如果选中一个单选按钮，则显示一个 div。我无法执行此操作，因为我的 javascript 有点弱。请在下面找到我的代码。 我的按钮是

 <label>
    <input type="radio" name="groups[]" value="6"> Head of Distribution Sales
</label>

选择按钮后我想显示这个div

<div class="form-group">
    <label class="col-md-3 control-label">Regions</label>
    <div class="col-md-9">
            <div class="checkbox-list">
                <label>
                    <input type="checkbox" name="groups[]" value="43"> Dhaka North
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="44"> Dhaka South
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="45"> Comilla
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="46"> Chittagong
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="47"> Khulna
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="48"> Mymensingh
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="49"> Sylhet
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="50"> Rangpur
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="51"> Bogra
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="52"> Barisal
                </label>
            </div>
    </div>
</div>

请帮我解决这个问题。

Answer 1

要实现此目的，您必须在 HTML 中进行以下更改并将 jquery 代码实现为片段。

1. 为要显示/隐藏的 div 指定 id。

2. 最初通过指定 style="display:none"

   隐藏 div

3. 放置一个 jquery 代码以在单选按钮上的更改事件上触发并相应地显示/隐藏 div。

请检查下面的代码片段。

$("input[type='radio'][name='groups[]']").on("change",function(){
  if($(this).is(':checked')){
    $("#displayDS").show();
  }else{
    $("#displayDS").hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
    <input type="radio" name="groups[]" value="6"> Head of Distribution Sales
</label>
<br/><br/>
<div class="form-group" style="display:none" id="displayDS">
  <label class="col-md-3 control-label">Regions</label>
  <div class="col-md-9">
    <div class="checkbox-list">
      <label>
        <input type="checkbox" name="groups[]" value="43"> Dhaka North
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="44"> Dhaka South
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="45"> Comilla
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="46"> Chittagong
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="47"> Khulna
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="48"> Mymensingh
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="49"> Sylhet
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="50"> Rangpur
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="51"> Bogra
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="52"> Barisal
      </label>
    </div>
  </div>
</div>