下面这个教程将告诉你如何使用javascript和CSS实现一个简单的复选框列表亮高效果。(原文: woork/翻译：帕兰)
- html代码
<div class=“selector_int”>Chose topic</div>
<ul id=“selector”>
<li id=“sel1″><input type=“checkbox” id=“inp1″ onClick=“javascript:selectElement(1)”/>Technology</li>
<li id=“sel2″><input type=“checkbox” id=“inp2″ onClick=“javascript:selectElement(2)”/>Science</li>
<li id=“sel3″><input type=“checkbox” id=“inp3″ onClick=“javascript:selectElement(3)”/>Gaming</li>
<li id=“sel4″><input type=“checkbox” id=“inp4″ onClick=“javascript:selectElement(4)”/>Lifestyle</li>
<li id=“sel5″><input type=“checkbox” id=“inp5″ onClick=“javascript:selectElement(5)”/>Entertainment</li>
<li id=“sel6″><input type=“checkbox” id=“inp6″ onClick=“javascript:selectElement(16)”/>Sport</li>
</ul>
<div class=“selector_footer”>
<input type=“button” value=“Save”>
</div>目前的这个复选框列表，不管你选择哪一个，都不会改变他们的文本颜色或是背景颜色，所以我们将在第3步里面使用一个javascript的onclick属性来实现:onClick=“javascript:selectElement(id)
- PHP代码
你可以在这份复选列表里面使用PHP代码来实现一些功能，比如查询结果。举例来说，如果这是一个使用了个id_desc_pk (主键)：<?php
$getTopic_sql = ‘SELECT id_desc_pk, description FROM TOPIC’;
$getTopic = mysql_query($getTopic_sql);
?>
下面是增加了<li>元素后的示例：
<?php while ($row = mysql_fetch_array($getTopic)) {?>
<li id=“sel<?php echo $row['id_desc_pk']; ?>“><input type=“checkbox” id=“inp<?php echo $row['id_desc_pk']; ?>” onClick=“javascript:selectElement(<?php echo $row['id_desc_pk']; ?>)”/>
<?php echo $row['description']; ?></li>
<?php } ?> - Javascript函数
你可以通过添加下面这个Javascript函数到你的<head>之间，来实现复选列表，当被选择状态下的背景颜色，其中colorSelected就是你想的颜色值:
<script language=“javascript”>
function selectElement(idElement){
var colorSelected = ‘#FFFFCC’;
var colorNoSelected = ‘#FFFFFF’;
liElement = document.getElementById(‘sel’+idElement);
inputElement = document.getElementById(‘inp’+idElement);
if(liElement.style.background==”){
liElement.style.background = colorSelected;
} else {
liElement.style.background = colorNoSelected;
}
}
</script>
OK，这是一个示例下载包。
没有评论:
发表评论