复选框没有被取消选中答案

【问题标题】：checkbox not getting unchecked复选框没有被取消选中
【发布时间】：2014-12-05 12:52:37
【问题描述】：

我有 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>

这是我的 javascript

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();

}

}
}

提前致谢

【问题讨论】：

无效的 html，重复的 ids id="prof"
如果我改变它，那么我必须使用许多 ajax 代码.. 请你指导我。因为我的复选框列表很长
尝试在属性中使用名称而不是 id 来对复选框进行分组

标签： javascript html ajax checkbox

【解决方案1】：

试试这个示例代码，让它更清晰

var insdel = function(chk) {
  console.log(chk.value, chk.checked, chk.id);
  if (chk.checked) {
    console.log('insert ', chk.value);
    //do the rest
  } else {
    console.log('delete ', chk.value);
    //do the rest
  }
  //do the rest
};

<form>
  <fieldset><!-- updated ids, also the onclick parameter -->
    <input id="prof1" type="checkbox" onclick="insdel(this)" value="Cricket" /><span>Cricket</span>
    <input id="prof2" type="checkbox" onclick="insdel(this)" value="Football" /><span>Football</span>
    <input id="prof3" type="checkbox" onclick="insdel(this)" value="Hockey" /><span>Hockey</span>
  </fieldset>
</form>

【讨论】：

@user3225075，很高兴它对您有所帮助。