Сгенерировать сразу несколько штрих-кодов

Question

В настоящее время я разрабатываю систему складских запасов. И единственная оставшаяся задача - создать и распечатать идентификаторы bin стойки. В приведенном ниже коде генерируется только 1 штрих-код. Он генерирует только последний элемент. Мне нужно распечатать сразу несколько штрих-кодов для печати. Вот link Я использовал в качестве ссылки для генерации штрих-кода.

<?php 
     require ("../../connect/db.php"); 
     $sql = "select * from location_bin where rack_id = 3"; 
     $rack = mysqli_query($mysqli, $sql); 

     while($row = mysqli_fetch_array($rack)){ 
      $id = $row['bin_id']; 
      echo "<input type='checkbox' name='barcodeValue' id='barcodeValue' value='$id'/>$id<br>"; 
      } 
    ?> 

Вот сценарий в создании штрих-кода.

<script type="text/javascript"> 
    function generate(){ 
    $(document).ready(function() { 
    $("input[name=barcodeValue]:checked").each(function() { 
    var id = $(this).attr("value"); 
    function generateBarcode(id){ 
    var value = id; 
    var btype = $("input[name=btype]:checked").val(); 
    var renderer = $("input[name=renderer]:checked").val(); 

    var quietZone = false; 
    if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){ 
     quietZone = true; 
    } 

    var settings = { 
     output:renderer, 
     bgColor: $("#bgColor").val(), 
     color: $("#color").val(), 
     barWidth: $("#barWidth").val(), 
     barHeight: $("#barHeight").val(), 
     moduleSize: $("#moduleSize").val(), 
     posX: $("#posX").val(), 
     posY: $("#posY").val(), 
     addQuietZone: $("#quietZoneSize").val() 
    }; 
    if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')){ 
     value = {code:value, rect: true}; 
    } 
    if (renderer == 'canvas'){ 
     clearCanvas(); 
     $("#barcodeTarget").hide(); 
     $("#canvasTarget").show().barcode(value, btype, settings); 
    } else { 
     $("#canvasTarget").hide(); 
     $("#barcodeTarget").html("").show().barcode(value, btype, settings); 
    } 
    } 


    function showConfig1D(){ 
    $('.config .barcode1D').show(); 
    $('.config .barcode2D').hide(); 
    } 

    function showConfig2D(){ 
    $('.config .barcode1D').hide(); 
    $('.config .barcode2D').show(); 
    } 

    function clearCanvas(){ 
    var canvas = $('#canvasTarget').get(0); 
    var ctx = canvas.getContext('2d'); 
    ctx.lineWidth = 1; 
    ctx.lineCap = 'butt'; 
    ctx.fillStyle = '#FFFFFF'; 
    ctx.strokeStyle = '#000000'; 
    ctx.clearRect (0, 0, canvas.width, canvas.height); 
    ctx.strokeRect (0, 0, canvas.width, canvas.height); 
    } 

    $(function(){ 
    $('input[name=btype]').click(function(){ 
     if ($(this).attr('id') == 'datamatrix') showConfig2D(); else showConfig1D(); 
    }); 
    $('input[name=renderer]').click(function(){ 
     if ($(this).attr('id') == 'canvas') $('#miscCanvas').show(); else $('#miscCanvas').hide(); 
    }); 
    generateBarcode(id); 
    }); 
}); 
}); 
} 
</script> 

Ниже приведен код HTML.

<div class="title">Type</div> 

     <input type="radio" name="btype" id="code39" value="code39" checked><label for="code39">code 39</label><br /> 
     <input type="radio" name="btype" id="code93" value="code93"><label for="code93">code 93</label><br /> 
     <input type="radio" name="btype" id="code128" value="code128"><label for="code128">code 128</label><br /> 
     <input type="radio" name="btype" id="datamatrix" value="datamatrix"><label for="datamatrix">Data Matrix</label><br /><br /> 
    </div> 
    <div class="config" style="display:none"> 
     <div class="title">Misc</div> 
     Background : <input type="text" id="bgColor" value="#FFFFFF" size="7"><br /> 
     "1" Bars : <input type="text" id="color" value="#000000" size="7"><br /> 
     <div class="barcode1D"> 
     bar width: <input type="text" id="barWidth" value="1" size="3"><br /> 
     bar height: <input type="text" id="barHeight" value="50" size="3"><br /> 
     </div> 
     <div class="barcode2D"> 
     Module Size: <input type="text" id="moduleSize" value="5" size="3"><br /> 
     Quiet Zone Modules: <input type="text" id="quietZoneSize" value="1" size="3"><br /> 
     Form: <input type="checkbox" name="rectangular" id="rectangular"><label for="rectangular">Rectangular</label><br /> 
     </div> 
     <div id="miscCanvas"> 
     x : <input type="text" id="posX" value="10" size="3"><br /> 
     y : <input type="text" id="posY" value="20" size="3"><br /> 
     </div> 
    </div> 
    <div class="config"> 
     <div class="title">Format</div> 
     <input type="radio" id="css" name="renderer" value="css" checked="checked"><label for="css">CSS</label><br /> 
     <input type="radio" id="bmp" name="renderer" value="bmp"><label for="bmp">BMP (not usable in IE)</label><br /> 
     <input type="radio" id="canvas" name="renderer" value="canvas"><label for="canvas">Canvas (not usable in IE)</label><br /> 
    </div> 
    </div> 
    <div id="submit"> 
    <input type="button" onClick="generate();" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Generate the barcode&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"> 
    </div> 
</div> 
<div id="barcodeTarget" class="barcodeTarget"></div> 
<canvas id="canvasTarget" width="150" height="100"></canvas> 

скриншот Выход

Answer 1

Попробуйте это, также сделал JSFIDDLE

HTML

<input class="thischeckbox" type='checkbox' name='123' id='123' value='123' />123 
<br> 
<input class="thischeckbox" type='checkbox' name='456' id='456' value='456' />456 
<br> 
<input class="thischeckbox" type='checkbox' name='789' id='789' value='789' />789 
<br> 

<div class="title">Type</div> 

<input type="radio" name="btype" id="code39" value="code39" checked> 
<label for="code39">code 39</label> 
<br /> 
<input type="radio" name="btype" id="code93" value="code93"> 
<label for="code93">code 93</label> 
<br /> 
<input type="radio" name="btype" id="code128" value="code128"> 
<label for="code128">code 128</label> 
<br /> 
<input type="radio" name="btype" id="datamatrix" value="datamatrix"> 
<label for="datamatrix">Data Matrix</label> 
<br /> 
<br /> 
<div class="config"> 
    <div class="title">Format</div> 
    <input type="radio" id="css" name="renderer" value="css" checked="checked"> 
    <label for="css">CSS</label> 
    <br /> 
    <input type="radio" id="bmp" name="renderer" value="bmp"> 
    <label for="bmp">BMP (not usable in IE)</label> 
    <br /> 
    <input type="radio" id="canvas" name="renderer" value="canvas"> 
    <label for="canvas">Canvas (not usable in IE)</label> 
    <br /> 
</div> 
<div class="config"> 
    <div class="title">Misc</div> 
    Background : 
    <input type="text" id="bgColor" value="#FFFFFF" size="7"> 
    <br /> "1" Bars : 
    <input type="text" id="color" value="#000000" size="7"> 
    <br /> 
    <div class="barcode1D"> 
    bar width: 
    <input type="text" id="barWidth" value="1" size="3"> 
    <br /> bar height: 
    <input type="text" id="barHeight" value="50" size="3"> 
    <br /> 
    </div> 
    <div class="barcode2D"> 
    Module Size: 
    <input type="text" id="moduleSize" value="5" size="3"> 
    <br /> Quiet Zone Modules: 
    <input type="text" id="quietZoneSize" value="1" size="3"> 
    <br /> Form: 
    <input type="checkbox" name="rectangular" id="rectangular"> 
    <label for="rectangular">Rectangular</label> 
    <br /> 
    </div> 
    <div id="miscCanvas"> 
    x : 
    <input type="text" id="posX" value="10" size="3"> 
    <br /> y : 
    <input type="text" id="posY" value="20" size="3"> 
    <br /> 
    </div> 
</div> 
<div id="submit"> 
    <input id="generatecode" type="button" onClick="generate();" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Generate the barcode&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"> 
</div> 

<div id="barcodeTarget" class="barcodeTarget"></div> 
<canvas id="canvasTarget" width="150" height="100"></canvas> 

JS

$('.barcode2D').hide(); 
$('.barcode1D').show(); 
$('#miscCanvas').hide(); 

$('#generatecode').click(function() { 
    $('input[type=checkbox]:checked').each(function() { 
    var id = $(this).attr("id"); 
    generateBarcode(id) 
    }); 
}); 

$(document).on('change', 'input[name=btype]', function() { 
    if ($(this).attr('id') == 'datamatrix') { 
    showConfig2D(); 
    } else { 
    showConfig1D(); 
    } 
}); 
$(document).on('change', 'input[name=renderer]', function() { 
    if ($(this).attr('id') == 'canvas') { 
    $('.config').show(); 
    $('#miscCanvas').show(); 
    } else { 
    $('.config').show(); 
    $('#miscCanvas').hide(); 
    } 
}); 

function generateBarcode(id) { 
    var value = id; 
    var btype = $("input[name=btype]:checked").val(); 
    var renderer = $("input[name=renderer]:checked").val(); 

    var quietZone = false; 
    if ($("#quietzone").val() != '') { 
    quietZone = true; 
    } 

    var settings = { 
    output: renderer, 
    bgColor: $("#bgColor").val(), 
    color: $("#color").val(), 
    barWidth: $("#barWidth").val(), 
    barHeight: $("#barHeight").val(), 
    moduleSize: $("#moduleSize").val(), 
    posX: $("#posX").val(), 
    posY: $("#posY").val(), 
    addQuietZone: $("#quietZoneSize").val() 
    }; 
    if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')) { 
    alert("Test") 
    value = { 
     code: value, 
     rect: true 
    }; 
    } 
    if (renderer == 'canvas') { 
    clearCanvas(); 
    $("#barcodeTarget").hide(); 
    $("#canvasTarget").show().barcode(value, btype, settings); 
    } else { 
    $("#canvasTarget").hide(); 
    $("#barcodeTarget").html("").show().barcode(value, btype, settings); 
    } 
} 

function showConfig1D() { 
    $('.config').show(); 
    $('.barcode2D').hide(); 
    $('.barcode1D').show(); 
} 

function showConfig2D() { 
    $('.config').show(); 
    $('.barcode1D').hide(); 
    $('.barcode2D').show(); 
} 

function clearCanvas() { 
    var canvas = $('#canvasTarget').get(0); 
    var ctx = canvas.getContext('2d'); 
    ctx.lineWidth = 1; 
    ctx.lineCap = 'butt'; 
    ctx.fillStyle = '#FFFFFF'; 
    ctx.strokeStyle = '#000000'; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.strokeRect(0, 0, canvas.width, canvas.height); 
}