Не сработало.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class='checkklass'>
<p><input type='checkbox' name='a' value='699'> 4 </p>
<p><input type='checkbox' name='a' value='700'> 5 </p>
<p><input type='checkbox' name='a' value='701'> 6 </p>
<p><input type='checkbox' name='a' value='702'> 7 </p>
<p><input type='checkbox' name='a' value='703'> 8 </p>
<p><input type='checkbox' name='a' value='704'> 9 </p>
<p><input type='checkbox' name='a' value='705'> 10 </p>
<p><input type='checkbox' name='a' value='706'> 11 </p>
<p><input type='checkbox' name='a' value='707'> 12</p>
</div>
<input name="f_select_category" type="text" maxlength="255" size="50" value=",700,701,702," onchange="jQuery.modal.nc_modal_confirm=true;undefined">
<script type="text/javascript">
var check=$("input[name='a']");
check.change(function(){
var names=',';
check.each(function(){if($(this).is(':checked')){names+=$(this).val()+',';}});
$("input[name='f_select_category']").val(names);
});
$("input[name='f_select_category']").val();
window.addEventListener("DOMContentLoaded", function() {
document.querySelector("input[name='f_select_category']").addEventListener("input", function() {
var b = this.value.match(/\d+/g) || [];
[].forEach.call(document.querySelectorAll(".checkklass input"), function(a) {
a.checked = ~b.indexOf(a.value)
})
})
});
</script>
</body>
</html>