在iCheck的复选框上显示和隐藏另一个复选框处于选中和未选中状态

Question

Here is my code

Icheck checkbox css class mapping code

<script>
$(function () {
    //Initialize Select2 Elements
    $(".select2").select2();        
    //Flat red color scheme for iCheck
    $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
        checkboxClass: 'icheckbox_flat-red',
        radioClass: 'iradio_flat-red'
    });

});

Jquery for Showing and hiding second checkbox

<script>
$("#ch_bx_haveparent").iCheck('toggle', function () {
    $("#ch_bx_haveparent").on('ifChecked', function (event) {
        alert('ch_bx_status Checkbox Shown');
        $("#ch_bx_status").show();
    });
    $("#ch_bx_haveparent").on('ifUnchecked', function (event) {
        alert('ch_bx_status Checkbox  hidden');
        $("#ch_bx_status").hide();
    });
});

click here for Icheck Checkbox

HTML Code

<div class="modal" id="menuiconmodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Menu</h4>
          </div>
          <div class="modal-body"> 

       <div class="form-group"><input type="checkbox" class="flat-red" id="ch_bx_haveparent"/> 
       // Input tag for checkbox that will be shown and hidden
       <div class="form-group"><input type="checkbox" class="flat-red" runat="server" id="ch_bx_status" /></div>
       </div>
          </div>
          <div class="modal-footer">

            <a href="javascript:;" id="sucess" class="btn btn-primary" data-dismiss="modal">Save</a>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>  
    <!-- /.modal -->

Alert is populating but Hiding and showing is not working.

Answer 1

 $("#ch_bx_haveparent").change(function() { if ($("#ch_bx_haveparent").is(':checked')) { $("#ch_bx_status").show(); } else { $("#ch_bx_status").hide(); } }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="modal" id="menuiconmodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Menu</h4> </div> <div class="modal-body"> <div class="form-group"> <input type="checkbox" class="flat-red" id="ch_bx_haveparent" />// Input tag for checkbox that will be shown and hidden <div class="form-group"> <input type="checkbox" class="flat-red" runat="server" id="ch_bx_status" /> </div> </div> </div> <div class="modal-footer"> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> 

Try this way

Answer 2

$('#ch_bx_haveparent').change(function () {
    if ($(this).attr("checked")) {
        $("#ch_bx_status").show();
        return;
    }
    $("#ch_bx_status").hide();
});

Answer 3

**Found Solution with jquery's addClass() and removeClass() Methods for icheck checkbox hiding and showing in **

Code of CSS

.call
    {
        display:none;
    }

Code of Jquery

<script>
$("#ch_bx_haveparent").iCheck('toggle', function () {
    $("#ch_bx_haveparent").on('ifChecked', function (event) {
        $("#parentmenu").removeClass("call"); // hide

    });
    $("#ch_bx_haveparent").on('ifUnchecked', function (event) {
        $("#parentmenu").addClass("call"); // shown
    });
});

**Where div id="parentmenu" **