正在更新全選/取消全選複選框

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

我首先想到了一個快速的答案，但那麼我注意到這會吸得很糟糕 因爲如果有人手動勾選複選框，這完全是braindead。

<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

我不知道如果這是你問的是什麼，但使用非按鈕就像

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

Answer 3

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