JSFiddle - React, Tailwind, and code Playground

by joycse06

HTML

<input type="checkbox" name="gal-item-12" val="">Add me <br />
<input type="checkbox" name="gal-item-22" val="">Add me <br />
<input type="checkbox" name="gal-item-21" val="">Add me <br />
<input type="checkbox" name="gal-item-5" val="">Add me <br />
<input type="checkbox" name="gal-item-6" val="">Add me <br />
<input type="checkbox" name="gal-item-34" val="">Add me <br />







<div class="add-inputfield"></div>

CSS

input#shortcode{
  margin-top: 20px;
  width: 200px;
  height: 30px;    
}

JavaScript

$('<span>[gallery</span><input type="text" id="shortcode" /><span>]</span>').appendTo('.add-inputfield');

$(document).on('change','input[type="checkbox"][name^="gal-item"]',function(){
    var checkedIds = $('input[type="checkbox"][name^="gal-item"]:checked').map(function(){
       return parseInt($(this).prop('name').replace(/gal-item-/,''));
       //console.log($(this).prop('name'));
    }).get();
    
    $('#shortcode').val('include="'+checkedIds.join(',')+'"');
   
});