JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>
    <form>
        <input type="checkbox" name="checked-product" value="311">Add To Cart (311)
        <div class="quantity">
            <input type="text" name="qty" maxlength="12" value="1" class="input-text qty"/>
        </div>
    </form>
</li>
<li>
    <form>
        <input type="checkbox" name="checked-product" value="321">Add To Cart (321)
        <div class="quantity">
            <input type="text" name="qty" maxlength="12" value="10" class="input-text qty"/>
        </div>
    </form>
</li>
<li>
    <form>
        <input type="checkbox" name="checked-product" value="98">Add To Cart (98)
        <div class="quantity">
            <input type="text" name="qty" maxlength="12" value="5" class="input-text qty"/>
        </div>
    </form>
</li>
</ul>

    <button type="button" onclick="checkbox_test()">Add selected to cart</button>
    
    <div id="output">
    
    </div>

CSS

#output {
  margin-top: 10px;
}

JavaScript

// function will loop through all input tags and create
// url string from checked checkboxes
function checkbox_test() {
    var counter = 0, // counter for checked checkboxes
        i = 0,       // loop variable
        url = '/urlcheckout/add?product=',    // final url string
        // get a collection of objects with the specified 'input' TAGNAME
        input_obj = document.getElementsByTagName('input');
        
    var boxWasChecked = false;
    
    // loop through all collected objects
    for (i = 0; i < input_obj.length; i++) {
        // if input object is checkbox and checkbox is checked then ...
        switch(input_obj[i].type) {
        	case 'checkbox':
            if (input_obj[i].checked) {
              // ... increase counter and concatenate checkbox value to the url string
              counter++;
              boxWasChecked = true;
              url = url + input_obj[i].value + ',qty=';
            } else {
            	boxWasChecked = false;
            }
          	break;
          case 'text':
          	if (boxWasChecked) {
              url = url + input_obj[i].value + '|';
	            boxWasChecked = false;
            }
            
          	break;
        }
    }
    
    url = url.replace(/\|$/, ''); // remove trailing |
    
    // display url string or message if there is no checked checkboxes
    if (counter > 0) {
        // remove first "&" from the generated url string
        url = url.substr(1);
        // display final url string
        alert(url);
    }
    else {
        alert('There is no checked checkbox');
    }
}