控制某排的checkbox全選與不選

edited 十月 2013 in Javascript
大家好,有關於checkbox全選與不選問題,我希望控制某排的checkbox全選與不選,但是目前的語法只有在IE下才有用,在Chrome瀏覽器裡面則無作用,
請各位幫忙看看,應該怎麼做才能在Chrome下也支援

謝謝!!

<script language="JavaScript"><!--
function check_all(obj,cName) {
var checkboxs=document.getElementsByName(cName);
for(var i=0;i<checkboxs.length;i++){
checkboxs.checked = obj.checked;
}
}
--></script>

<TABLE WIDTH="100%" CELLSPACING=2 CELLPADDING=3 BORDER=0>
<FORM method="post">
<TR>
<TD align="center"><B>02</B><input type="checkbox" name="all" onClick="check_all(this,'20110802');" title="全選/非全選"></TD>
<TD align="center"><B>星期二</B></TD>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-1">未使用</td>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-2">未使用</td>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-3">未使用</td>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-4">未使用</td>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-5">未使用</td>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-6">未使用</td>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-7">未使用</td>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-8">未使用</td>
<td><input type="checkbox" ID="20110802" name="fm_data[roomset][]" value="20110802-2-9">未使用</td>
</TR><TR>
<TD align="center"><B>03</B><input type="checkbox" name="all" onClick="check_all(this,'20110803');" title="全選/非全選"></TD>
<TD align="center"><B>星期三</B></TD>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-1">未使用</td>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-2">未使用</td>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-3">未使用</td>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-4">未使用</td>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-5">未使用</td>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-6">未使用</td>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-7">未使用</td>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-8">未使用</td>
<td><input type="checkbox" ID="20110803" name="fm_data[roomset][]" value="20110803-3-9">未使用</td>
</TR></TABLE>
</FORM>

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=6195

評論

  • edited 八月 2011
    改這樣就可以了
    <script language="JavaScript"><!--
    function check_all(obj,cName) {
    var checkboxs;
    try
    {
        checkboxs=document.getElementsByClassName(cName);
    }
    catch(e)
    {
        checkboxs=document.getElementsByName(cName); 
    }
    for(var i=0;i<checkboxs.length;i++){
    checkboxs[i].checked = obj.checked;
    }
    }
    --></script>
    
    <TABLE WIDTH="100%" CELLSPACING=2 CELLPADDING=3 BORDER=0> 
    <FORM method="post">
    <TR>
    <TD align="center"><B>02</B><input type="checkbox" name="all" onClick="check_all(this,'20110802');" title="全選/非全選"></TD> 
    <TD align="center"><B>星期二</B></TD> 
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-1">未使用</td>
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-2">未使用</td>
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-3">未使用</td>
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-4">未使用</td>
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-5">未使用</td>
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-6">未使用</td>
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-7">未使用</td>
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-8">未使用</td>
    <td><input type="checkbox" ID="20110802" class="20110802" name="fm_data[roomset][]" value="20110802-2-9">未使用</td>
    </TR><TR> 
    <TD align="center"><B>03</B><input type="checkbox" name="all" onClick="check_all(this,'20110803');" title="全選/非全選"></TD> 
    <TD align="center"><B>星期三</B></TD> 
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-1">未使用</td>
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-2">未使用</td>
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-3">未使用</td>
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-4">未使用</td>
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-5">未使用</td>
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-6">未使用</td>
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-7">未使用</td>
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-8">未使用</td>
    <td><input type="checkbox" ID="20110803" class="20110803" name="fm_data[roomset][]" value="20110803-3-9">未使用</td>
    </TR></TABLE>
    </FORM>
    
    其實IE的做法是有問題的,因為ID在一個頁面裡應該是獨立的
Sign In or Register to comment.