问JS脚本的.onchange或.onclick和复选框值
EN

Stack Overflow用户

提问于 2015-08-11 16:30:10

回答 2查看 309关注 0票数 0

我有一个复选框数组class='year‘。当复选框被选中时，我想在JS中调用函数。

html是，

<table class="inner" id="searchTable">
                                         <search>Exam Type:<th>                        
                                                    <?php 
                                                        foreach($exams as $key=>$value):

                                                               echo "<tr><td class='left'><input type='checkbox' class='year' id='$key' name='$key' value='$value'

                                                            if ($category['selected'])
                                                            {
                                                            echo ' checked';
                                                            }

                                                            > $value</td></tr>";
                                                          endforeach; ?>
                                     </table>

此表位于表单内。但我现在太担心表格了。

当选中任何复选框时，JS应该创建一个包含一行的表。

function yearTable(){
    var table = document.getElementById("searchYear");
    var row = document.createElement("tr");    
    var cell = document.createElement("td");
    var empty = document.createTextNode("year.value");
    /*var empty = document.createTextNode("");*/
    cell.appendChild(empty);
    row.appendChild(cell);
    table.appendChild(row); 
}

document.getElementByClassName('year').onchange = yearTable;

我尝试过使用.onchange和.clicked，但当选中一个框时，这两种方法都不会执行任何操作。另外，我需要在JS中检查该值。我尝试过year.value，但这不起作用。以前，我有一个id = 'exam‘的选择选项菜单，我可以使用exam.value获得这个值，但我不知道如何为这些复选框做同样的事情。任何帮助都将不胜感激。谢谢

javascript

checkbox

负载均衡 CLB

CLB 提供流量分发服务，轻松应对大流量场景

回答 2

Stack Overflow用户

发布于 2015-08-11 16:38:00

虽然html文档可能只包含一个具有特定id的元素，但可以有多个具有相同类的元素。

所以，没有像document.getElementByClassName这样的函数。有一个函数document.getElementsByClassName，它返回一个元素数组，所以可以调用该函数，然后迭代它的返回值，设置所需的回调。

此外，您发布的代码必须在此行抛出异常：

document.getElementByClassName('year')

因此，如果你在Chrome中查看developer tools，或者在火狐中查看Firebug，你可能会看到一个错误。

票数 0

Stack Overflow用户

发布于 2015-08-11 23:11:05

明白了,

function yearTable(){
    var year = this.value; 

    var table = document.getElementById("searchYear");
    var row = document.createElement("tr"); 
    var cell = document.createElement("td");
    if (this.checked){
       var empty = document.createTextNode(year);
    }
    cell.appendChild(empty);
    row.appendChild(cell);
    table.appendChild(row); 
}

var checkboxes = document.getElementsByClassName('year');
    for(var index in checkboxes){
        checkboxes[index].onchange = yearTable;
    }