如果選中無線電輸入，則更改父 div 的類

Question

我一直在搜索和搜索谷歌以尋找我的問題的答案，但到目前為止還沒有成功。 我希望你們中的一個可以給我一些幫助。

示例在此處發布。

我的目標是在選擇單選時將包含所選單選按鈕 className 的表更改為“已選擇”，當未選擇單選時將其更改為“容器”。

我有 10 個類名稱為“股息”的 div，其中包含一個類名稱為“容器”的表，然后是其中的兩個較小的表。 在底部的容器表中是一個名為“page1”的隱藏單選按鈕。 然后另外 10 個相同但輸入名稱是“page2”

我為容器表編寫了一個 onClcick，以便用戶可以選擇整個表而不是單選按鈕，但不是我試圖更改所選容器的樣式，以便用戶知道他們已經選擇了它。

我嘗試了幾種不同的方法，只需編寫即可將樣式更改為新類

 document.getElementById('container').className = 'selected';

但是因為所有 10 個 div 共享相同的名稱，它只會改變它找到的第一個元素的樣式。

所以我嘗試編寫這個循環來檢查文檔中是否有任何選定的收音機，然后將其他名稱更改為默認樣式。

我確定它很愚蠢，但我很困惑 atm.. 任何幫助將不勝感激。

謝謝。

//check for check = true
selected = function () {
var divs = document.getElementByTagName('DIV'),
    div,
    tbl = divs.getElementById('TABLE'),
    rad,
    stat,
    i;

    for (var i = 0; i < divs.length; i++) {
// no .id but the counter of the loop
div = div[i];
// check the className not the div element
if (div.className == 'dividend') {

    rad = tbl.getElementsByTagName('INPUT');

    if (tbl.className == 'container') {
    if (rad[0].checked == true) {
        tbl.className = 'selected'; 
    } 
}
}
}
};


// Gets radio button for selected element in Page1 and checks
function P1sClick(n){ 
document.forms["myform"]["page1"][n].checked=true;
selected();
};

// Gets radio button for selected element in Page2 and checks
function P2sClick(n){ 
 document.forms["myform"]["page2"][n].checked=true;

};

////////////HTML  I only included 2 examples of the DIVs because its a lot of code/////

<form name="myform" action="sample.asp" method="POST">

<h2>Page 1</h2>

<div class="dividend>
<table class="container" onclick="P1sClick(0)" cellpadding="0" cellspacing="0"><tr><td valign="top" >
  <table class="grid" cellpadding="0" cellspacing="0">
<tr><td width="40" height="25" style="border-bottom:1px solid #000; border-    right:1px solid #000;">1</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">2</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">3</td></tr>
    <tr><td height="25" style="border-right:1px solid #000;">4</td></tr>
  </table>
</td><td valign="top">
  <table class="grid" cellpadding="0" cellspacing="0">
    <tr><td width="40" height="25" style="border-bottom:1px solid #000;">5</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000;">6</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000;">7</td></tr>
    <tr><td height="25">8</td></tr>
  </table>
</td></tr>
<tr><td colspan="2" align="center" height="20" style="padding-top:3px; font-weight:bold; font-style:italic;">4x4<br><input type="radio" name="page1" title="4 by 4" value="4x4" style="display:none;"></td></tr></table>
</div>

<div class="dividend">
<table class="container" onclick="P2sClick(0)" cellpadding="0" cellspacing="0"><tr><td valign="top">
      <table class="grid" cellpadding="0" cellspacing="0">
    <tr><td width="40" height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">1</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">2</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">3</td></tr>
    <tr><td height="25" style="border-right:1px solid #000;">4</td></tr>
  </table>
</td><td valign="top">
  <table class="grid" cellpadding="0" cellspacing="0">
    <tr><td width="40" height="33" style="border-bottom:1px solid #000;">5</td></tr>
    <tr><td height="33" style="border-bottom:1px solid #000;">6</td></tr>
    <tr><td height="34">7</td></tr>
  </table>
</td></tr>
<tr><td colspan="2" align="center" height="20" style="padding-top:3px; font-weight:bold; font-style:italic;">4x3<br><input type="radio" name="page2" title="4 by 3" value="4x3" style="display:none;"></td></tr></table>
    </div>

更新：

所以我一直在研究 jQuery 並在這里找到了這篇文章。 我正在嘗試這個功能，它看起來應該對我有用，但不是。 也許你可以告訴我這是否是一條更好的路線。

$(document).ready(function() {  
$('input[type="radio"]').change( function() {
  //   grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("page1")+'"]');

    // iterate through each  
//     if checked, set its parent label's class to "selected"
//     if not checked, remove the "selected" class from the parent label
//     my HTML markup for each button is  <label><input type="radio" /> Label Text</label>
//     so that this works anywhere even without a unique ID applied to the button and label
    for (var i=0; i < this_radio_set.length;i++) {
    if ( $(this_radio_set[i]).is(':checked') )             $(this_radio_set[i]).parent('table').addClass('selected');
        else $(this_radio_set[i]).parent('table').removeClass('selected');
}
});
}); 

更新我已經用 BobS 所做的以下更正更新了我的 jQuery。 我現在使用 jQuery 通過單擊表格來選擇單選，並使用 jquery 在選中單選時更改樣式。 出於某種原因，我在組合這兩個功能時遇到了麻煩，所以當您單擊表格並選中單選時，樣式也會發生變化。 這是我最新的代碼，希望有人可以幫助我：p

// jQuery to select radio button within clicked table
$(function() {

$('table').click(function(event) {  

    if(event.target.type != "radio") {

        var that = $(this).find('input:radio');
        that.attr('checked', !that.is(':checked'));

    }
});
});

// jQuery to change the style of the table containing the selected radio button
$(function() {
$('input[type="radio"]').change( function() {
  //   grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    for (var i=0; i < this_radio_set.length;i++) {
    if ( $(this_radio_set[i]).is(':checked') )         
      $(this_radio_set[i]).closest('table').addClass('selected');
        else 
        $(this_radio_set[i]).closest('table').removeClass('selected');
}
});
});  

Answer 1

首先，對於最佳實踐，您應該為元素使用不同的 id。 id 是唯一的

其次這是一個錯誤： if (rad.checked = true) {

它應該是一個 == 而不僅僅是一個 =

Answer 2

我希望我發現了你所有的錯誤。 X）

for (var i = 0; i < divs.length; i++) {
    // no .id but the counter of the loop
    div = divs[i];
    // check the className not the div element
    if (div.className == 'dividend') {
        // Next will not work, because you would need divs 
        // with duplicate ids! Use classes instead.
        tbl = div.getElementById('container');
        // getElement>s<ByTagName
        rad = tbl.getElementsByTagName('INPUT');
        // == not =
        if (rad[0].checked == true) {
            tbl.className = 'selected'; 
        } 
    }

}

Answer 3

一些可能對您有幫助的事情：

您似乎在最近的編輯中刪除了元素的 id。 這很好，但是你必須循環遍歷一些東西。 您也不應該期望 getElementById 根據元素中的類返回元素； 這只適用於身份證。

但是，在這種情況下，您的“容器”表始終是“股息”div 的直接子級，因此您可以使用諸如

tbl=div.childNodes[0];

拿到桌子。

注意類名比較：如果一個元素有多個類名（通過繼承獲得），它可能看起來像“fooclass 紅利”，然后使用 == 進行字符串比較將不起作用。 為此使用正則表達式或字符串拆分。

我還想重申其他人所說的：停止你正在做的事情並學習 jQuery :-)

xxstevenxo 之后的更新提供了一些 jQuery 代碼：

我做了 3 件事來讓您的新 jQuery 代碼執行您想要的操作：

1. 我擺脫了“selected”函數的定義，因為它有許多錯誤導致腳本在遇到示例 jQuery 代碼之前退出。 也許你沒有遇到這個問題——取決於你的 JavaScript 的總和。

2. 當您引用 $(this).attr("page1") 時，它實際上應該是 $(this).attr("name") 如果您單擊 page1 的單選按鈕，它將為您提供“page1”

3. 使用“最近的”而不是“父母”。 父級僅上升一級，“表”選擇器僅用於根據直接父級是否為表進行過濾。 最接近的繼續向上樹，直到找到匹配。

一旦我進行了這 3 項更改，jQuery 所做的事情就與您的想法很接近，至少在單擊單選按鈕時是這樣。

您可能應該在“更改”操作中使用該匿名函數，並使用它來代替“選定”函數，以便在用戶單擊表格時樣式更改也會生效。