当前位置: 首页 > 图文教程 > 网络编程 > Javascript > HTML-CSS群中单选引发的“事件”

Javascript
用JavaScript实现浏览器地震效果
Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向
Javascript实例教程(14) 鼠标触发窗口
使主页呈现“飞舞”特效
Javascript实例教程(21) OLE Automation(1)
Javascript实例教程(13) 鼠标移过时报警
Javascript实例教程(10) 随机显示图片
Javascript实例教程(2) 创建弹出式窗口
JavaScript 小技巧(第十集)
Javascript实例教程(3) 创建折叠式导航菜单
Javascript实例教程(7) 利用Javascript进行密码保护
完美解决一个事件激活多个函数(2)
Javascript模拟游戏中的弹出菜单效果
Javascript实例教程(6) 在一个表单中设置和检查Cookies
JavaScript 小技巧(第八集)
Javascript实例教程(4) 探测浏览器插件
JavaScript 小技巧(第九集)
JavaScript学习:基础继承机制
初学Javascript之cookie篇(译)
让弹出窗口变得“体贴”一些(javascript)

No. « 10 11 12 13 »

技术文章搜索

关键字

Javascript 中的 HTML-CSS群中单选引发的“事件”

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-10   浏览: 60 ::
收藏到网摘: n/a

因为死神的一个单选按钮问题，N多人出来扯淡，唉，偶这个菜鸟级人物也出来，混水摸鱼去。一个不小心也摸到了一条。
首先看从baidu中挖出来的一段代码，偶就从这里动手的。
复制代码 代码如下:

<script>
function checkradio()
{
for(i=0;i<document.form1.Fruit.length;i++)
{
if(document.form1.Fruit[i].checked)
{
alert("您最喜欢的水果是："+document.form1.Fruit[i].nextSibling.nodeValue);
}
}
}
</script>
<form name="form1">
您最喜欢的水果是：<br>
<input type=radio value="Fruit1" name="Fruit" checked>苹果
<input type=radio value="Fruit2" name="Fruit">香蕉
<input type=radio value="Fruit3" name="Fruit">草莓
<input type=radio value="Fruit4" name="Fruit">凤梨
<input type=button value="选择" onclick="checkradio()">
</form>

这段代码的作用是判断所选的值。
现在要的效果是如果每个选项都为空的时候要给出一个提示，下面的代码就是偶改动后的效果
程序代码
<script>
function checkradio()
{
var j=0;
for(i=0;i<document.form1.Fruit.length;i++)
{
if(document.form1.Fruit[i].checked==true)
{
alert("你选择了"+document.form1.Fruit[i].nextSibling.nodeValue);
//break;这个break经飞飞指点，无效，去掉
}else{
j=j+1;
if(j==4){
alert("靠，你TMD选一个，偶就不用出来了噶！");
}
}
}
}
</script>
<form name="form1">
您最喜欢的水果是：<br>
<input type=radio value="Fruit1" name="Fruit">
苹果
<input type=radio value="Fruit2" name="Fruit">香蕉
<input type=radio value="Fruit3" name="Fruit">草莓
<input type=radio value="Fruit4" name="Fruit">凤梨
<input type=button value="选择" onclick="checkradio()">
</form>

后来又看到了一个由晨写的更清晰的一段代码，在这里也帖一下。
（注：为了便于测试，改动了一下，思路还是他的思路）
复制代码 代码如下:

<script>
function checkradio()
{
var flag=false;
for(var i=0;i<=document.form1.Fruit.length-1;i++)
{
if(form1.Fruit[i].checked){
flag=true;}
}
if(flag)
{
alert("^_^");
return false;
}else{
alert("大侠，您老就选一个吧！");
}
}
</script>

单选的结束了，飞飞老大不死心，在晚上的时候搞出了一个针对复选框的代码。
复制代码 代码如下:

<script>
var j=document.getElementsByName("Fruit");
function allche(){
for(var i=0; i <j.length; i++){
if(document.form1.Fruit[i].checked!=true) document.form1.Fruit[i].checked= document.form1.suoy.checked;
if(document.form1.Fruit[i].checked==true) document.form1.Fruit[i].checked= document.form1.suoy.checked;
}
}
function checkall(){
var aa=0
for(var i=0; i <j.length; i++){
if(document.form1.Fruit[i].checked == true) aa++;
aa!=j.length ? document.form1.suoy.checked=false : document.form1.suoy.checked=true;
}
}
function checkradio(){
var a=0
var list=""
for(var i=0; i<j.length;i++)
if (document.form1.Fruit[i].checked== true){
list=="" ? list=document.form1.Fruit[i].value : list=list+","+document.form1.Fruit[i].value;
}
if (list!="") alert("你喜欢的水果是"+list);
else{
a++;
if (a==j.length)alert("大哥。你都不选我怎么知道你喜欢什么？");}
}
</script>
<form name="form1" id="frm">
您最喜欢的水果是：<br>
<input type=checkbox value="苹果" name="Fruit" onClick="checkall()">
苹果
<input type=checkbox value="香蕉" name="Fruit" onClick="checkall()">
香蕉
<input type=checkbox value="草莓" name="Fruit" onClick="checkall()">
草莓
<input type=checkbox value="凤梨" name="Fruit" onClick="checkall()">
凤梨
<input type=button value="选择" onclick="checkradio()">
<input type=checkbox onclick="allche()" name="suoy">全选
</form>
<script language="javascript" type="text/javascript" id="commonjs">
function test()
{
fruitlist = "";
for(i=0;i<document.getElementById("frm").length;i++)
if(document.getElementById("frm")[i].type=="checkbox" && document.getElementById("frm")[i].checked)
fruitlist += document.getElementById("frm")[i].value + " ";
if(fruitlist!="")
alert("你喜欢的水果是 "+fruitlist);
else
alert("大哥。你都不选我怎么知道你喜欢什么？");
}
</script>

再来一段更简洁的代码、效果更好的关于复选的代码。
复制代码 代码如下:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == false) box.checked = true;
}
}
function uncheckAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == true) box.checked = false;
}
}
function switchAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
box.checked = !box.checked;
}
}
// End -->
</script>
</head>
<body>
<form name=checkboxform>
<input type=checkbox name=C1>C1<br>
<input type=checkbox name=C2>C2<br>
<input type=checkbox name=C3>C3<br>
<input type=checkbox name=C4>C4<br>
<input type=checkbox name=C5>C5<br>
<input type=checkbox name=C6>C6<br>
<input type=checkbox name=C7>C7<br>
<input type=checkbox name=C8>C8<br>
<input type=checkbox name=C9>C9<br>
<br>
<input type=button value="全选" onClick="checkAll()"><br>
<input type=button value="取消" onClick="uncheckAll()"><br>
<input type=button value="反选" onClick="switchAll()"><br>
</form>