Javascript 更新“全部选择/全部取消选择”复选框

选择所有复选框时，以下代码可以正常工作，但是它使用了按钮的输入类型。我怎样才能把它变成一个锚（比如链接）而不是一个按钮的输入类型。选择“全部”后，需要更新以取消选中“全部”。我曾尝试使用innerHTML将其放在一个DIV中，但是没有成功。我将一如既往地感谢任何帮助

非常感谢

<script language="JavaScript">
function Check(chk)
{
if(document.myform.Check_All.value=="Check All"){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
document.myform.Check_All.value="UnCheck All";
}else{

for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
document.myform.Check_All.value="Check All";
}
}

// End -->
</script>
<form name="myform" action="checkboxes.asp" method="post">


<input type="checkbox" name="check_list" value="1">apple<br>
<input type="checkbox" name="check_list" value="2">banana<br>
<input type="checkbox" name="check_list" value="3">pear<br>

<input type="button" name="Check_All" value="Check All" onClick="Check(document.myform.check_list)"> 



</form>

功能检查（chk）
{
if（document.myform.Check_All.value==“Check All”）{
对于（i=0；i
苹果

香蕉

梨

我不确定这是否是您想要的，但使用非按钮就像

<div onclick="Check(document.myform.check_list)">Check All</div>

全部检查

我首先想到了一个快速的答案，但后来我注意到这会非常糟糕 因为如果有人手动勾选复选框，那完全是脑死

<form name="myform" action="checkboxes.asp" method="post">
<input type="checkbox" name="check_list" value="1">apple<br>
<input type="checkbox" name="check_list" value="2">banana<br>
<input type="checkbox" name="check_list" value="3">pear<br>
</form>

<div id="checker">Check All</div>

<script type ="text/javascript">
//The toggle code for the div itself
$("#checker").bind("click", function() {
    var toggleState = !! jQuery.data(this, "togglestate");

    $(document.myform.check_list).each(function() {
    this.checked = !toggleState;
    });


    $(this).text(toggleState ? "Check All" : "UnCheck All");
    jQuery.data(this, "togglestate", !toggleState);
});

//Keep track of manual ticking of the checkboxes
//- if all checkboxes are ticked manually, change to uncheck all
//- if all checkboxes are unticked manualy, change to check all

$(document.myform).delegate("input[name=check_list]", "change", function() {
    var curState, prevState, fullStateChange = true;

    //Iterate through the checkboxes to see if all are unticked or if all are ticked
    $(document.myform.check_list).each(function() {
    curState = this.checked;

    if (prevState != null && prevState !== curState) {
        fullStateChange = false;
    }

    prevState = curState;
    });

    //Return as some were ticked and some were not
    if (!fullStateChange) {
    return;
    }

    $("#checker").data("togglestate", curState).text(!curState ? "Check All" : "UnCheck All");

});

//React to initial state of the checkbuttons
$(document.myform.check_list).trigger( "change" );
</script>

苹果

香蕉

梨

全部检查
//div本身的切换代码
$（“#检查器”）.bind（“单击”，函数（）{
var-toggleState=！！jQuery.data（这个“toggleState”）；
$（document.myform.check_list）。每个（函数（）{
this.checked=！toggleState；
});
$（this）.text（切换状态？“全部选中”：“全部取消选中”）；
数据（这个“togglestate”，！togglestate）；
});
//跟踪复选框的手动勾选
//-如果手动勾选了所有复选框，则更改为取消勾选所有复选框
//-如果手动取消选中所有复选框，则更改为“全部选中”
$（document.myform）.delegate（“输入[名称=检查列表]，“更改”，函数（）{
var curState、prevState、fullStateChange=true；
//反复检查复选框，查看是否全部取消勾选或是否全部勾选
$（document.myform.check_list）。每个（函数（）{
curState=this.checked；
if（prevState！=null&&prevState！==curState）{
fullStateChange=false；
}
prevState=草书状态；
});
//返回，因为有些已勾选，有些未勾选
如果（！fullStateChange）{
返回；
}
$（“#checker”）.data（“togglestate”，curState）.text（！curState？“全部选中”：“全部取消选中”）；
});
//对复选按钮的初始状态作出反应
$（document.myform.check_list）.trigger（“change”）；

演示

功能检查（chk）{
var checkedVal=document.getElementById（“全部检查”）；
if（checkedVal.innerHTML==“全部检查”）{
对于（i=0；i
香蕉

梨

谢谢您的回复，Michael。是的，这与我想要的很接近，但是只要单击div（标记为“全部选中”，我希望此文本更新为“全部取消选中”（或类似的内容）。我是否需要使用InnerHTML属性才能在javascript函数中对此进行更改？此外，由于它在div中是纯文本，因此用户不知道是否可以选择它，这就是我将放置在HTML链接锚中的原因。是否可以将其放置在“是”中，您需要使用

div

对象t的

.InnerHTML

o更新内容。您也可以为此使用

a

，但您也可以设置

div

或任何您想要使用的元素的样式。这太棒了！不过我有一个问题。假设我有多个字段需要此复选框，我如何设置字段的名称（在本例中是其复选列表）要处理不同的复选框？这将节省我重新编写每个复选框的代码（指定不同的div-checker1、checker2等）和输入names@skippy，通过使用循环、数组和对象等基本编程概念。：P太累了，无法重构它：（哦，好的，抱歉，我是jquery的新手！我会解决的。谢谢你的帮助anyway@skippy最后，通过投票和接受答案来感谢你；）这正是我想要的。我可以在我的脚本中使用它，也可以为使用多个复选框的不同字段调用此函数。但有一个问题是innerHTML在不同的浏览器上工作吗？谢谢你的帮助help@skippy，是的，许多浏览器完全支持innerHTML属性。

<script language="JavaScript">
function Check(chk){
 var checkedVal = document.getElementById("Check_All");

 if(checkedVal.innerHTML=="Check All"){
  for (i = 0; i < chk.length; i++)
  chk[i].checked = true ;
  checkedVal.innerHTML = "UnCheck All";
 }else{
  for (i = 0; i < chk.length; i++)
   chk[i].checked = false ;
   checkedVal.innerHTML = "Check All";
 }
}
</script>
<form name="myform" action="checkboxes.asp" method="post">

<input type="checkbox" name="check_list" value="1">apple<br>
<input type="checkbox" name="check_list" value="2">banana<br>
<input type="checkbox" name="check_list" value="3">pear<br>

<a href="javascript:;" id="Check_All" onClick="Check(document.myform.check_list); return false">Check All</a>
</form>