JavaScript元素样式随动态ID而变化

时间:2012-11-26 15:41:20

标签: php javascript html css forms

我正在尝试在选中旁边的复选框时在列表项中添加一行。我已设法做到但我无法检查是否已选中此框。

JS档案

    if(document.getElementById(theID).checked){

document.getElementById(theID).setAttribute("style", "text-decoration:line-through");
}

HTML / PHP

                echo'<ol>';
            foreach($to_do_XML->task as $item)
            {
                $theID = $item['id'];

            echo '<li id="'.$theID.'">'.$item.'</li>' ;?><form ><input  onclick="return cross('<?=$theID?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/></form>
                 <?php     

            }
            echo '</ol>';

我还应该补充说,列表项是在循环通过xml元素的foreach循环中添加的

以上代码没有任何帮助将不胜感激

2 个答案:

答案 0 :(得分:4)

如果$theID是一个字符串,则需要引用它:

     <input  onclick="return cross('<?php echo $theID; ?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/>

同时从您的功能中删除它:

got_elements_id

会引起参考错误。

答案 1 :(得分:0)

我相信这会更好:

echo '<li id="'.$theID.'">'.$item.'</li>' ;?>
<form >
    <input  onclick="return cross('<? echo $theID; ?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/>
</form>

function cross( id ){

    var element = document.getElementById( id );
    if( element.checked){

        element.style.textDecoration = "line-through";
    }
}

甚至:

function cross( id ){

    var element = document.getElementById( id );        
    element.style.textDecoration = element.checked ? "line-through" : "";
}

这也可以取消选中并删除直线。