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

Question

I'm trying to create a user form, I am stuck in it bacause I want that if A radio button is checked then display a div.I could not do this as I am little bit weak in javascript. please find my code below. My button is

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

And after selecting the button I want to show this 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>

Please help me guys solving this.

Answer 1

To achieve this you have to make following changes in your HTML and implement jquery code as snippet.

1. Give id to the div which you want to show/hide.

2. Initially hide div by giving style="display:none"

3. place a jquery code to fire on change event on radio button and show/hide div accordingly.

Please check below snippet.

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

I add some IDs to simplifier

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

Answer 3

Use jQuery :

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

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