<head>
<script type="text/javascript">
function handleChange1() {
var counch1 = document.getElementById('countspr1');
var chkcou1 = document.getElementById('spr1');
if(chkcou1.checked == true){
counch1.style.display='inline';
counch1.focus();
counch1.value = 1;
}
else{
counch1.style.display='none';
counch1.value = '' ;
}
}
function handleChange2() {
var counch2 = document.getElementById('countspr2');
var chkcou2 = document.getElementById('spr2');
if(chkcou2.checked == true){
counch2.style.display='inline';
counch2.focus();
counch2.value = 1;
}
else{
counch2.style.display='none';
counch2.value = '';
}
}
function handleChange3() {
var counch3 = document.getElementById('countspr3');
var chkcou3 = document.getElementById('spr3');
if(chkcou3.checked == true){
counch3.style.display='inline';
counch3.focus();
counch3.value = 1;
}
else{
counch3.style.display='none';
counch3.value = '';
}
}
</script>
</head>
<body>
<input style="display:none" id="countspr1" name="checkcountsp[]" type="text" maxlength="2" size="1" value="" >
<input type="checkbox" id="spr1" name="checksp[]" onchange="handleChange1(this)" value="Товар 1">Товар 1
<br>
<input style="display:none" id="countspr2" name="checkcountsp[]" type="text" maxlength="2" size="1" value=""/>
<input type="checkbox" id="spr2" name="checksp[]" onchange="handleChange2(this)" value="Товар 2">Товар 2
<br>
<input style="display:none" id="countspr3" name="checkcountsp[]" type="text" maxlength="2" size="1" value=""/>
<input type="checkbox" id="spr3" name="checksp[]" onchange="handleChange3(this)" value="Товар 3">Товар 3
</body>
function handleChange( ctx ) {
var el = ctx.previousElementSibling;
if( ctx.checked && el.nodeName.toLowerCase() === "input" ){
el.style.display = 'inline';
el.value = 1;
el.focus();
} else {
el.style.display = 'none';
}
};
function handleChange(input) {
var index = input.id.split('-')[1];
var counch = document.getElementById('countspr-' + index);
if (input.checked) {
counch.style.display='inline';
counch.value = 1;
counch.focus();
} else {
counch.style.display='none';
counch.value = '' ;
}
}
<input style="display:none" id="countspr-1" name="checkcountsp[]" type="text" maxlength="2" size="1" value="" >
<input type="checkbox" id="spr-1" name="checksp[]" onchange="handleChange(this)">Товар 1
<input type="checkbox" name="checkboxname" checked title="Подсказка"> Описание
Я в JS не очень силен, но подозреваю, что эти отдельные функции можно объединить в одну, для сокращения кода.
input[type="checkbox"].use-field:not(:checked) + .usable-field {
display: none;
}