Обновление Выбрать все / Снять все флажки

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>