Question

我一直在搜索谷歌搜索我的问题的答案但到目前为止都没有成功。我希望你们其中一个人能给我一些帮助。

我的目标是在选择收音机时将包含所选单选按钮className的表更改为“selected”，并在未选择收音机时将其更改为“container”。

我有10个div，类名为“dividend”，其中包含className为“container”的表，然后是其中的两个较小的表。在底部的容器表中是一个隐藏的单选按钮，名称为“page1”。然后另外10个相同但输入名称是“page2”

我为容器表编写了一个onClcick，因此用户可以选择整个表而不是单选按钮，但不是我正在尝试更改所选容器的样式，以便用户知道他们已选择它。

我尝试了几种不同的方法，只需编写

就可以将样式更改为新类

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

但是因为所有10个div共享相同的名称，它只会改变它找到的第一个元素的样式。

所以我尝试编写这个循环来检查文档中是否有任何选定的无线电，然后将该样式的其他名称更改为默认值。

我确定它有些愚蠢，但我很难过......任何帮助都会受到赞赏。

感谢。

//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并在此发现THIS。我正在尝试这个看起来应该对我有用的功能，但事实并非如此。也许你可以告诉我这是否是一条更好的路线..

$(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');
}
});
});

UPDATE 我已经使用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根据元素中的类返回元素;这只适用于id。

但是，在这种情况下，您的“容器”表始终是“dividend”div的直接子项，因此您可以使用

等技术

tbl=div.childNodes[0];

拿到桌子。

注意类名比较：如果一个元素有多个类名（通过继承获得），它可能看起来像“fooclass dividend”，然后使用==进行字符串比较将不起作用。为此使用正则表达式或字符串拆分。

我还想重申其他人的意见：停止你正在做的事情并学习jQuery： - ）

xxstevenxo提供了一些jQuery代码之后的

UPDATE：

我做了3件事来让你的新jQuery代码做你想做的事情：

我摆脱了“选定”函数的定义，因为它有许多错误使得脚本在命中示例jQuery代码之前退出。也许你没有遇到这个问题 - 取决于你的JavaScript的总和。
当你提到 $（本）.attr（ “第1页”）实际应该是 $（本）.attr（ “名称”）如果单击page1的单选按钮
使用“最近”而不是“父”。 parent仅上升一级，“table”选择器仅用于根据直接父级是否为表进行过滤。最近的树继续向上，直到找到匹配为止。

一旦我做了这3个更改，jQuery就会做一些接近你的想法，至少在单击单选按钮时。

您可能应该在“更改”操作中使用该匿名函数，并使用它来代替“选定”函数，以便样式更改也会在用户单击表格时生效。

如果检查无线电输入，则更改父div的类

3 个答案: