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

Javascript
为调试JavaScript添加输出窗口的代码
Js 中debug方式
一些mootools的学习资源
JavaScript 精粹读书笔记(1,2)
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
数组Array进行原型prototype扩展后带来的for in遍历问题
javascript 鼠标拖动图标技术
比较搞笑的js陷阱题
js 自定义的联动下拉框
js 省地市级联选择
JavaScript 类似flash效果的立体图片浏览器
JavaScript Event学习第九章 鼠标事件
jQuery AJAX回调函数this指向问题
toString()一个会自动调用的方法
jQuery 文本框模拟下拉列表效果
关于页面被拦截的问题
javascript 解析url的search方法
一个XML格式数据转换为图表的例子
Javascript 获取链接(url)参数的方法[正则与截取字符串]
一些收集整理非常不错的JS效果代码

No. « 285 286 287 288 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-10   浏览: 35 ::
收藏到网摘: 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>