ラジオボタンで処理すればよいのでは?
たとえばこう
HTML
1<input type="radio" name="r" id="r1" value="1"><input type="button" value="1" onclick="document.querySelector('#r1').checked=true"></label>
2<input type="radio" name="r" id="r2" value="2"><input type="button" value="2" onclick="document.querySelector('#r2').checked=true"></label>
3<input type="radio" name="r" id="r3" value="3"><input type="button" value="3" onclick="document.querySelector('#r3').checked=true"></label>
4<input type="radio" name="r" id="r4" value="4"><input type="button" value="4" onclick="document.querySelector('#r4').checked=true"></label>
5<input type="radio" name="r" id="r5" value="5"><input type="button" value="5" onclick="document.querySelector('#r5').checked=true"></label>
チェックボックスバージョン
html
1<input type="checkbox" name="c" id="c1" value="1"><input type="button" value="1" onclick="document.querySelector('#c1').checked=!document.querySelector('#c1').checked">
2<input type="checkbox" name="c" id="c2" value="2"><input type="button" value="2" onclick="document.querySelector('#c2').checked=!document.querySelector('#c2').checked">
3<input type="checkbox" name="c" id="c3" value="3"><input type="button" value="3" onclick="document.querySelector('#c3').checked=!document.querySelector('#c3').checked">
4<input type="checkbox" name="c" id="c4" value="4"><input type="button" value="4" onclick="document.querySelector('#c4').checked=!document.querySelector('#c4').checked">
5<input type="checkbox" name="c" id="c5" value="5"><input type="button" value="5" onclick="document.querySelector('#c5').checked=!document.querySelector('#c5').checked">
※不要なjavascriptの表記があったので削除しました
フルバージョン
CSS
1[name="c[]"]{display:none;}
2[name="c[]"]:checked + .cx{background-Color:red;}
javacript
1window.addEventListener('DOMContentLoaded', function(e){
2 document.querySelector('#f1').addEventListener('submit',function(e){
3 var c=[].map.call(document.querySelectorAll('[name="c[]"]:checked'),function(x){
4 return x.value;
5 }).join(",");
6 if(c===""){
7 alert("not checked");
8 e.preventDefault();
9 }else{
10 if(!confirm(c+" checked. OK?")){
11 e.preventDefault();
12 }
13 }
14 });
15 [].forEach.call(document.querySelectorAll('.cx'),function(x){
16 x.addEventListener('click',function(e){
17 var t=e.target;
18 var n=document.querySelector('#c'+t.value);
19 n.checked=!n.checked;
20 });
21 });
22});
PHP
1
2<?PHP
3$c=filter_input(INPUT_GET,"c",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
4if(!is_null($c)){
5 print "checked:".implode(",",$c)."<br>";
6}
7?>
8<form method="get" id="f1">
9<input type="checkbox" name="c[]" id="c1" value="1"><input type="button" value="1" class="cx">
10<input type="checkbox" name="c[]" id="c2" value="2"><input type="button" value="2" class="cx">
11<input type="checkbox" name="c[]" id="c3" value="3"><input type="button" value="3" class="cx">
12<input type="checkbox" name="c[]" id="c4" value="4"><input type="button" value="4" class="cx">
13<input type="checkbox" name="c[]" id="c5" value="5"><input type="button" value="5" class="cx"><br>
14<input type="submit" value="go">
15</form>