如果选中单选按钮，则在 Codeigniter 中显示 div答案

【问题标题】：If radio buttons is checked then display div in Codeigniter如果选中单选按钮，则在 Codeigniter 中显示 div
【发布时间】：2016-10-17 11:23:30
【问题描述】：

我正在尝试创建一个用户表单，但我被困在其中，因为我希望如果选中单选按钮然后显示一个 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>

请帮我解决这个问题。

【问题讨论】：

首先显示你的 jquery 代码你尝试了什么
是否存在其他单选按钮？还是只有它一个？
你需要给出完整的HTML结构，如果没有Radio按钮，那么只有我们给出了解决方案。

标签： javascript php jquery twitter-bootstrap codeigniter

【解决方案1】：

要实现这一点，您必须在 HTML 中进行以下更改并将 jquery 代码实现为 sn-p。

给要显示/隐藏的 div 的 id。
通过给style="display:none"初始隐藏div
放置一个 jquery 代码以触发单选按钮上的更改事件并相应地显示/隐藏 div。

请检查下面的sn-p。

$("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>

【讨论】：

谢谢先生。你拯救了我的一天。 @Rahul Patel
不客气，伙计。如果对您有帮助，请接受并投票赞成我的回答，以便其他人也能发现它有帮助。

【解决方案2】：

我添加了一些ID来简化

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

<div id="yourDiv" class="form-group" style="display:none;"> [... checkboxes ...] </div>


// JS
document.getElementById('myRadio').addEventListener('change', function(){
  document.getElementById('yourDiv').style.display = this.checked ? 'block' : 'none';
});

document.getElementById('myRadio').addEventListener('change', function(){
  document.getElementById('yourDiv').style.display = this.checked ? 'block' : 'none';
});

<label>
    <input type="radio" id="myRadio" name="groups[]" value="6"> Head of Distribution Sales
</label>
<div id="yourDiv" class="form-group" style="display:none;">
    <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>
                <label>
    <input type="radio" name="groups[]" value="6"> Head of Distribution Sales
</label>
            </div>
    </div>
</div>

【讨论】：

【解决方案3】：

使用 jQuery ：

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

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

【讨论】：