-1

I want to check the length if at least one checkbox is selected from multiple check boxes. However, for the below, it returns nothing. The function is not firing. I've added the required jQuery, css, JS scripts etc for better example. My intention is that through length method, I want to check if at least one checkbox is checked, otherwise, return 0.

function checkcond1checkbox() {
  var checked = $("#productModal input:checkbox:checked").length;
  alert(checked);
}


$(function () {
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
    checkboxClass: 'icheckbox_flat-green',
    radioClass: 'iradio_flat-green'
})
});
/* iCheck plugin Flat skin, green
----------------------------------- */
.icheckbox_flat-green,
.iradio_flat-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background: url(green.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_flat-green {
    background-position: 0 0;
}
    .icheckbox_flat-green.checked {
        background-position: -22px 0;
    }
    .icheckbox_flat-green.disabled {
        background-position: -44px 0;
        cursor: default;
    }
    .icheckbox_flat-green.checked.disabled {
        background-position: -66px 0;
    }

.iradio_flat-green {
    background-position: -88px 0;
}
    .iradio_flat-green.checked {
        background-position: -110px 0;
    }
    .iradio_flat-green.disabled {
        background-position: -132px 0;
        cursor: default;
    }
    .iradio_flat-green.checked.disabled {
        background-position: -154px 0;
    }

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox_flat-green,
    .iradio_flat-green {
        background-image: url(green@2x.png);
        -webkit-background-size: 176px 22px;
        background-size: 176px 22px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>

<div class="box-body row" id="productModal">
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" onclick="return checkcond1checkbox();" name='Selectedproducts1[]' value="1">1
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" onclick="return checkcond1checkbox();" name='Selectedproducts1[]' value="2">2
</div>
Niladri Banerjee - Uttarpara
  • 2,219
  • 8
  • 52
  • 92
  • Your fiddle was missing a reference to jQuery, so I added it and it now works. What exactly is your issue? Try checking the console for errors. Also ensure that you've declared `checkcond1checkbox()` at the correct scope for an inline event handler (ie. under the `window`) - or better yet remove the inline handlers and attach the events unobtrusively instead. – Rory McCrossan Aug 07 '18 at 08:46
  • @RoryMcCrossan basically this checkboxes are with iCheck. When I check any one or two, it does not call the function. – Niladri Banerjee - Uttarpara Aug 07 '18 at 08:48
  • 1
    Here is a list of all the events that you can use with iCheck, maybe you can use check and uncheck events. https://stackoverflow.com/questions/26441735/radio-box-get-the-checked-value-icheck – Jacobo Aug 07 '18 at 08:48
  • @Andreas I've modified the question with my best effort. My checkboxes are with iCheck and I want to check if at least one checkbox is checked. – Niladri Banerjee - Uttarpara Aug 07 '18 at 09:00
  • @Andreas I've modified the script and the question. Please check again. – Niladri Banerjee - Uttarpara Aug 07 '18 at 09:07

1 Answers1

1

You have to use the iCheck specific events:

  • ifClicked: user clicked on a customized input or an assigned label
  • ifChanged: input's "checked", "disabled" or "indeterminate" state is changed
  • ifChecked: input's state is changed to "checked"
  • ifUnchecked: "checked" state is removed
  • ifToggled: input's "checked" state is changed
  • ifDisabled: input's state is changed to "disabled"
  • ifEnabled: "disabled" state is removed
  • ifIndeterminate: input's state is changed to "indeterminate"
  • ifDeterminate: "indeterminate" state is removed
  • ifCreated: input is just customized
  • ifDestroyed: customization is just removed

$(function() {
  var checkboxes = $('input[type="checkbox"].flat-red, input[type="radio"].flat-red');
  
  checkboxes.iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass: 'iradio_flat-green'
    })
    .on('ifChanged', function(event){
      var l1 = checkboxes.filter(":checked").length,
          l2 = $('input[type="checkbox"]').filter(":checked").length,
          l3 = $("input:checked").length;
          
      console.log(l1, l2, l3);
    });
});
/* iCheck plugin Flat skin, green
----------------------------------- */
.icheckbox_flat-green,
.iradio_flat-green {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    border: none;
    cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<div class="box-body row" id="productModal">
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" name='Selectedproducts1[]' value="1">1
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" name='Selectedproducts1[]' value="2">2
</div>
Andreas
  • 21,535
  • 7
  • 47
  • 56