如何使用JavaScript檢查1複選框取消其他，反之亦然？

這裏不使用單選按鈕的原因是因爲我想讓所有複選框處於未選中狀態，還有其他行爲與檢查和取消選中相關。如何使用JavaScript檢查1複選框取消其他，反之亦然？

當第一個框被選中時，該行中的所有單選按鈕被選中。（請參閱How to use javascript to select a row of radio buttons when a checkbox is selected）

未選中第一個按鈕時，取消選擇該行中的所有無線電。

每當選中複選框時，其他複選框應該自動取消選擇。

我在想也許我可以通過CSS類來做到這一點。因此，只要選中了該類中的某個複選框，其他複選框就會自動取消選中。

我想象這樣的代碼：

function uncheckOther(row_id) { 
     var row = document.getElementById(row_id) 
    var theClassName = row.className; 
    var classGroup = document.getElementsByClassName(theClassname); 
    for(var i=0; i<classGroup.length; i++) { 
     if(classGroup[i].id != row_id) { 
      classGroup[i].radio = unchecked; 
     } 
    } 
}

我會怎麼做呢？這裏的例子HTML與id和類的TR元素，和複選框在第一個孩子td元素：

<form name="form3" action="testfile4.php" method="get"> 
<table border="1"><thead> 
    <tr><th>Select entire row</th><th>item_code</th><th>page</th><th>usd_dn</th></tr> 
</thead> 
<tbody> 
    <tr id="534" class="15838"> 
     <td ><input type="checkbox" onclick="select_row(534);"></td>  <td>15838   <input type="radio" name="15838|item_code" value="534" /></td> 
     <td>284<input type="radio" name="15838|page" value="534" /></td> 
     <td>$73.00<input type="radio" name="15838|usd_dn" value="534" /></td> 
    </tr> 
    <tr id="535" class="15838"> 
     <td ><input type="checkbox" onclick="select_row(535);"></td>  <td>15838   <input type="radio" name="15838|item_code" value="535" /></td> 
     <td>299 
      <input type="radio" name="15838|page" value="535" /></td> 
     <td>$73.00<input type="radio" name="15838|usd_dn" value="535" /></td> 
    </tr> 
    <tr id="565"> 
     <td ><input type="checkbox" onclick="select_row(565);"></td>  <td>1611   <input type="radio" name="1611|item_code" value="565" /></td> 
     <td>66<input type="radio" name="1611|page" value="565" /></td> 
     <td>$3,350.00 
      <input type="radio" name="1611|usd_dn" value="565" /></td> 
    </tr> 
    <tr id="566"> 
     <td ><input type="checkbox" onclick="select_row(566);"></td>  <td>1611   <input type="radio" name="1611|item_code" value="566" /></td> 
     <td>66<input type="radio" name="1611|page" value="566" /></td> 
     <td>$3,225.00 
      <input type="radio" name="1611|usd_dn" value="566" /></td> 
    </tr> 
    </tbody> 
    </table> 
    </form>

我確定用jQuery的答案，但目前更喜歡純JavaScript。

來源

2011-11-28 Buttle Butkus

也可以取消選中所有單選按鈕。我只是沒有看到一個引人注目的案例來使用複選框來支持單選按鈕。 – NullUserException

嗯，問題是**用戶**不能從使用普通瀏覽器控件的「一個單選按鈕選中」到「沒有選中單選按鈕」。這應該是這樣的：對我來說，沒有檢查按鈕的一組單選按鈕是一個錯誤。對於任何具有**真實**「單選按鈕」經驗的人來說，這是一件應該清楚的事情，這些按鈕是機械相互關聯的，因此不可能（沒有斷開收音機）具有無按鈕檢查的情況。 – Pointy

好尖，點 – Ben

有充足的理由來使用複選框代替單選按鈕...

if ($('#myDivID').attr('checked'))

這會告訴你，如果它的檢查。要在所有的迴路，只保留目前的託運一個檢查，你可以做在$（文件）。就緒（）函數是這樣的：

$('input[type="checkbox"]').click(function() { 
    $('input[type="checkbox"]').attr('checked', false); 
    $(this).attr('checked', true); 
});

選中的所有複選框將保持選中狀態。其餘的將被取消選中。

來源

2011-11-28 03:11:04

原生的方法是使用checked屬性是這樣的複選框DOM對象：

document.getElementById("checkboxId").checked = false;

或者切換：

var cb = document.getElementById("checkboxId"); 
cb.checked = !cb.checked;

這裏的documentation的複選框DOM對象，如果你試圖不使用jQuery。

來源

2011-11-28 03:51:03

如何使用JavaScript檢查1複選框取消其他，反之亦然？

回答

相關問題