在iCheck的復選框上顯示和隱藏另一個復選框處於選中和未選中狀態

Question

這是我的代碼

icheck復選框CSS類映射代碼

<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

<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();
    });
});

單擊此處查看Icheck復選框

HTML代碼

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

警報正在填充，但是隱藏和顯示不起作用。

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

試試這個

Answer 2

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

Answer 3

**使用jquery的addClass（）和removeClass（）方法創建解決方案，用於icheck復選框隱藏並顯示在其中**

CSS代碼

.call
    {
        display:none;
    }

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

**其中div id =“ parentmenu” **