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代码实现为代码段。

将id提供给您要显示/隐藏的div。
最初通过提供style="display:none"
将一个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>

Answer 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';
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用jQuery：

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

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

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

3 个答案: