javascriptテーブル内のすべてのチェックボックスを選択

テーブルの横にチェックボックスを付したテーブルを作成したいとします。ユーザーが複数のサイトを選択し、Googleバーを使用してサイトを検索できるようにしたい。私は、各セルがチェックボックスで満たされたフォームを持っているテーブルを持っています。各セルにはそのセル内のすべてのオプションをチェックするチェック・ボタンがあります。私は、ページ上のすべてのオプションを選択するためのチェックボックスを追加したいと思います。（はい、私はちょうどこのオプションを残しておくことができますが、私はちょっと細胞のすべてのボックスにアクセスする方法を知りたいので、私が望むようにGoogleで検索することができます）。この時点javascriptテーブル内のすべてのチェックボックスを選択

<html> 
<head> 
<script type="text/javascript"> 
    function checkAll(checkname, bx) { 
     for (i = 0; i < checkname.length; i++){ 
      checkname[i].checked = bx.checked? true:false; 
     } 
    } 
    function checkPage(bx){ 


     var bxs = document.getElementByTagName ("table").getElementsByTagName ("link"); 

     for(i = 0; i < bxs.length; i++){ 
      bxs[i].checked = bx.checked? true:false; 
     } 
    } 
</script> 


</head> 
<body> 
<input type="checkbox" name="pageCheck" value="yes" onClick="checkPage(this)"><b>Check Page</b> 
<table border="1" name ="table"> 

<tr> 
    <td name ="list00"> 
     <form name ="list00"> 
      <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list00.link, this)"><b>Check All</b><dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
     </form> 
    </td> 
    <td><form name ="list01"> 
      <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list01.link, this)"><b>Check All</b><dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd>  
     </form></td> 
</tr> 
<tr> 
    <td><form name ="list10"> 
      <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list10.link, this)"><b>Check All</b><dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
     </form></td> 
    <td><form name ="list11"> 
      <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list11.link, this)"><b>Check All</b><dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
     </form></td> 
</tr> 
</table> 

</body> 
</html>

出典

2011-08-30 Bastiat

function checkAll(bx) { 
    var cbs = document.getElementsByTagName('input'); 
    for(var i=0; i < cbs.length; i++) { 
    if(cbs[i].type == 'checkbox') { 
     cbs[i].checked = bx.checked; 
    } 
    } 
}

を name='link'をしたい場合は、HTMLタグなど <inputを開始ビットがそう .getElementsByTagName ("link")は .getElementsByTagName ("input")であるべきです

は、その機能は、すべての

<input type="checkbox" onclick="checkAll(this)">

を確認するようにチェックボックスのonclick属性から呼び出されることがあります

あなたの質問を少し誤解しました。私はあなたのコードで試してみます。 getElement の ByTagNameは、あなたがそこにtypo'dた可能性が複数なければならず、

編集上の回答で指定されたタグである必要があります：チェックを切り替えを可能にするパラメータとして、マスターチェックボックスを渡す/vol7ronが提案したようにチェックをはずし、この答えで適切に修正されました。

この質問はページのすべてのチェックボックスを尋ねるので、これで十分です。

しかし、チェックボックスを探す要素を制御することは、あまりにも多くの方法で実現することができます。詳しくは触れられませんが、例としてdocument.getElementById（id）.getElementsByTagName制御されるすべてのチェックボックスが1つの要素。
それ以外の場合は、さらにタグ名検索/カスタムクラス名の取得を繰り返して、いくつかの名前を付けることができます。

出典

2011-08-30 23:57:51 Psyrus

これは感謝しました。しかし、私の目的を果たすために、if文全体を削除し、それをと置き換えました。cbs [i] .checked = bx.checked？正誤; トグルスイッチにする – Bastiat

このコードはボタンにのみ適しています。ユーザーがボックスのチェックを外すと、すべてのチェックボックスがオフになりません。 – vol7ron

@ vol7ron私は彼を選んだときあなたの答えwasntアップ。はい、それは直接的な状況的な答えでした。あなたが私の応答に気がついたら、コードを置き換えてチェックボックスのトグルを切り替えました。 – Bastiat

タグ名で助けを必要とcheckPage関数の中のセクションでは、だけにしてif(bxs.name =="link") { ... change the checked }

出典

2011-08-30 23:57:17

OPであった場合、実際にリンクした後、続いて[ドキュメント.links]（http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7068919）のコレクションは、getElementsByTagName *よりも優れた選択肢ですアンカーかもしれない要素 – RobG

例：http://jsfiddle.net/vol7ron/kMBcW/

function checkPage(bx){     
    for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--;) 
     for (var bxs=tbls[i].getElementsByTagName("input"), j=bxs.length; j--;) 
     if (bxs[j].type=="checkbox") 
      bxs[j].checked = bx.checked; 
}

出典

2011-08-31 00:02:42 vol7ron

あなたはjQueryのを試したことがありますか？ DOM操作のためのjavascript standartライブラリ（stackoverflowも使用しています）になっています。

これで、$（ '：checkbox'）を実行できます。prop（ 'checked'、true）;ページ上のすべてのチェックボックスをチェックします（しかし、おそらくテーブル内だけをチェックすることはできません）。

とにかくjQueryを使い始めると、あなたの人生はより楽しく幸せになり、多くの時間を節約します。

出典

2011-08-31 00:03:53 grisevg

...またはあなたが対応する形で、すべてのチェックボックスを反転したい場合でも、単純：

function checkAll(bx){ 
    var form = bx.form; 
    var ischecked = bx.checked; 
    for (var i = 0; i < form.length; ++i) { 
     if (form[i].type == 'checkbox') { 
      form[i].checked = ischecked; 
     } 
    } 
}

を...

<input type="checkbox" onclick="checkAll(this)">

出典

2015-07-20 18:42:39 Zrin

javascriptテーブル内のすべてのチェックボックスを選択

答えて

関連する問題