count selected checkboxes

  • 4 February 2015
  • 7 replies
  • 25 views

Badge +1

Want to count number of checkboxes selected when there are multiple checkbox fields on the form. I have a function that will count ALL checkbox selections but don't see a way to limit this to one field.Tried adding Control css class and client ID js var name but these did not help. Using NintexForm ver 2.3.1.0 with SharePoint 2013 on prem.


7 replies

Badge +6

Hi Ed,

If you name the Check boxes (eg Check1, Check2 Check 3 in the below example), the following form variable will generate a count of the selected check boxes. Feeding the variable output into a Calculated Value appears to display the correct count.

If(equals(Check1,true),1,0) +If(equals(Check2,true),1,0) +If(equals(Check3,true),1,0)

Cheers,

Mark

Badge +1

Thank you, Mark. I'm using Nintex Forms with SharePoint (SP2013) so the generated names are unwieldly. Even using the javascript alias would be awkward for the 26 values in this field. On top of that, the list is subject to periodic values adjustments. By your method, as I understand it, each change in the choice list would require a coding change. For these reasons, your suggestion is not the best choice for me, but I appreciate the option. It may fit better in another situation.

Badge +1

Thank you, Danish. I tried your suggestion but it didn't work. However, it did set me on the path to a deeper investigation and I was eventually able to get something to work for me.

Turns out the result of SP2013 checkboxes in a Nintex form is a table where each choice is a single checkbox value in its own row.

The TRICK is in the naming

The table takes the auto-generated name of the control, then each choice in each row takes the SAME NAME appended by a sequential number.

And these names are a mouthful!

In my form, the field(control) TABLE name is 
ctl00_ctl35_g_ccd50a17_7a46_42d9_92e6_2e59b86d994e_ctl00_ListForm2_formFiller_FormView_ctl61_3121571b_e9e8_4a7e_927d_a9a1147af8d6

....and the first row takes this name….
ctl00_ctl35_g_ccd50a17_7a46_42d9_92e6_2e59b86d994e_ctl00_ListForm2_formFiller_FormView_ctl61_3121571b_e9e8_4a7e_927d_a9a1147af8d6_0

....the second row name is….
ctl00_ctl35_g_ccd50a17_7a46_42d9_92e6_2e59b86d994e_ctl00_ListForm2_formFiller_FormView_ctl61_3121571b_e9e8_4a7e_927d_a9a1147af8d6_1

....and so on.

Knowing that, I created a function referencing just the first part of each item’s name,
               $('[id^=' + UI_CkBox + '_]')    instead of the usual    $('[id^=' + UI_CkBox + ']')

Notice the underscore in the last string. Without that you’d only get the table and ALL the choice values lumped together.

This uses the "Client ID Javascript variable name" from the Advanced settings of the control.

Ultimately I added a click event and was able to capture how many items were selected with each click.

Here is the code I used, which includes a demonstration of the page load timing events.

// DEMONSTRATE TIMING

NWF.FormFiller.Events.RegisterAfterReady(function(){
  //Your code here to be sure that the form is completely loaded
  // REFERENCE: community.nintex.com/thread/2322
alert("document ready after registered");
});  // END Events.RegisterAfterReady

NWF$(document).ready(function(){
alert("document READY");
}); // END doc ready

alert("Javascript!");


$('[id^=' + UI_CkBox + '_]').click(function(){
//alert("You clicked a checkbox");
// count how many are checked; display msg if > max
  if (CountSelected(UI_CkBox) >2) {
  alert("Please select only your TWO choices ");
  }
});   // END checkbox click

function CountSelected(field) {
//  for CHECKBOX fields only (?)
  groups = $('[id^=' + field + '_]');
  cntFound = groups.length;
  try{
  var cntLoop = 0;
  var cntShow = 0;
  var cntChecked = 0;
  var showChecked = "";
  var msgShow = "";
  $.each(groups, function(key,box) {
    cntLoop++; cntShow++;
    if (box.checked) {
     msgShow += " " + box.value + "  SELECTED";
    }
    if (box.checked === true) {
     cntChecked++;
    }
  });   // end each  loop
   alert("Selected " + cntChecked + " / " + cntFound + " " + msgShow);
  return cntChecked;
  }   // end Try
  catch(err){
  alert("ERROR: " + err);
  }   // end Catch
}   // end fn: CountSelected

Badge +6

Ed,

Your initial question raised referred to multiple checkboxes, not a choice list, so apologies for the guidance given. Individual check boxes would sum up easily given the solution provided, with the added bonus of you being able to nominate the names for the checkbox fields.

Regards,

Mark

Badge +1

Sorry for the confusion, Mark. Semantics usually trip me up in this business. With SharePoint, checkboxes, radio buttons and drop-down lists are considered different kinds of choice field. Plus this kind of software puts its own spin on things so the end result is never simple html. What is requested as checkboxes comes out as a table.

Badge +6

Here's what I did to count the checked checkboxes in a specific Choice control, and additionally verify that ALL of them were selected:

function AllCheckboxesChecked(control) {

    var totalCount = control.find("input").length;

    var checkedCount = control.find("input:checked").length;

    return totalCount == checkedCount;

}

Userlevel 2
Badge +9

@themos, how would you capture that number (items checked) so I can use it for a calculation?  I want to know how many items are checked in a choice control then use that to make a calculation.  I've taken your code and attempted to take that number to update a single line of text control.  Unfortunately, nothing happens.  Maybe you can tell me what I'm getting wrong.  

 

function AllCheckboxesChecked(control) 

 var totalCount=control.find("input").length; 

 var checkedCount=control.find("input:checked").length;

 return totalCount==checkedCount;

 NWF$("#"+NumberofCheckedBoxes).val(totalCount.val())

};

 

Reply