javascript - 更新全选/取消全选复选框

Question

以下代码在选择所有复选框时工作正常，但它使用按钮的输入类型。我怎样才能将其更改为 anchor (例如链接)而不是输入类型的按钮。一旦选择了所有内容，这需要更新为 UnCheck All。我试过使用 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>

Answer 1

我首先想到了一个快速的答案，但后来我发现这会很糟糕 因为如果有人手动勾选复选框，那就完全脑残了。

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

演示

http://jsfiddle.net/rBaUM/2/