Question

以下代码在选择所有复选框时工作正常，但它使用输入类型的按钮。我怎么能把它改成锚（例如像链接）而不是输入类型的按钮。一旦选中所有选项，这需要更新到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/

Answer 2

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

Answer 3

我不确定这是不是你要求的，但是使用非按钮就像

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

更新全选/取消选中所有复选框

3 个答案: