<script src="https://code.jquery.com/jquery-3.1.0.js"></script><div id='countchecked'>countchecked</div>

​

​

<!-- first item id: 101 -->

<p>id 101</p>

<div class='form'>

  <div class='form-group col-12'>

      <input data-id='101' class='checkbox' type='checkbox'>

  </div>

  <div class='form-row collapse'>

    <div class='input-group'>

      <label for='foo'>foo:</label>

      <input type='text' class='form-control' id='foo' value='first'>

    </div>

    <div class='input-group'>

      <label for='bar'>bar:</label>

      <input type='text' class='form-control' id='bar' value='second'>

    </div>  

  </div>

</div>

​

<!-- second item id: 102 -->

<p>id 102</p>

<div class='form'>

  <div class='form-group col-12'>

      <input data-id='102' class='checkbox' type='checkbox'>

  </div>

  <div class='form-row collapse'>

    <div class='input-group'>

      <label for='foo'>foo:</label>

      <input type='text' class='form-control' id='foo' value='first'>

    </div>

    <div class='input-group'>

      <label for='bar'>bar:</label>

      <input type='text' class='form-control' id='bar' value='second'>

    </div>  

  </div>

</div>

​

<!-- third item id: 103 -->

<p>id 103</p>

<div class='form'>

  <div class='form-group col-12'>

      <input data-id='103' class='checkbox' type='checkbox'>

  </div>

  <div class='form-row collapse'>

    <div class='input-group'>

      <label for='foo'>foo:</label>

      <input type='text' class='form-control' id='foo' value='first'>

    </div>

    <div class='input-group'>

      <label for='bar'>bar:</label>

      <input type='text' class='form-control' id='bar' value='second'>

    </div>  

  </div>

</div>

​

<div id='output'></div>