Javascript 复选框未被选中

我有4个复选框，在ajax的帮助下，我在选中时插入数据和未选中时删除数据之间切换。我能够成功地插入数据，但问题在于第一个复选框，因为一旦选中，我就无法取消选中它

<form>
<fieldset>
<input id="prof" type="checkbox" onclick="insdel('Cricket')" value="Cricket" /><span>Cricket</span>
<input id="prof" type="checkbox" onclick="insdel('Football')" value="Football" /><span>Football</span>
<input id="prof" type="checkbox" onclick="insdel('Hockey')" value="Hockey" /><span>Hockey</span>
</fieldset>
</form>

---

提前感谢

请尝试此示例代码以使其更清晰

var insdel=functionchk{ console.logchk.value，chk.checked，chk.id； 如果检查了chk{ console.log'insert'，chk.value； //做剩下的 }否则{ console.log'delete'，chk.value； //做剩下的 } //做剩下的 }; 板球 足球运动 曲棍球

---

无效的html，重复的ids id=profif如果我更改它，那么我必须使用许多ajax代码。。请你在这方面给我指点一下。因为我的复选框列表很长，所以在属性中使用名称而不是组a的idcheckbox@user3225075，我很高兴它帮助了你。

function insdel(answer) {
if(document.getElementById("prof").checked = true){
document.forms["t"]["ttq"].value= answer;
if((document.forms["t"]["ttq"].value)!=""){
var xmlhttp;    
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("list").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("GET","pop.php?q="+answer,true);
xmlhttp.send();

}

}
else{
document.forms["t"]["ttq"].value= answer;
if((document.forms["t"]["ttq"].value)!=""){
var xmlhttp;    
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","del.php?q="+answer,true);
xmlhttp.send();

}

}
}