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

2016-02-19 10:38 5 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐HTML-CSS群中单选引发的“事件”,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - Web开发 】

因为死神的一个单选按钮问题,N多人出来扯淡,唉,偶这个菜鸟级人物也出来,混水摸鱼去。一个不小心也摸到了一条。

首先看从baidu中挖出来的一段代码,偶就从这里动手的。
代码如下:

script 
function checkradio() 

    for(i=0;idocument.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;idocument.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; ij.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;idocument.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=C1C1br 
input type=checkbox name=C2C2br 
input type=checkbox name=C3C3br 
input type=checkbox name=C4C4br 
input type=checkbox name=C5C5br 
input type=checkbox name=C6C6br 
input type=checkbox name=C7C7br 
input type=checkbox name=C8C8br 
input type=checkbox name=C9C9br 
br 
input type=button value="全选" onClick="checkAll()"br 
input type=button value="取消" onClick="uncheckAll()"br 
input type=button value="反选" onClick="switchAll()"br 
/form 

来源:https://www.tulaoshi.com/n/20160219/1595317.html

延伸阅读
标签: FLASH flash教程
poluoluo核心提示:AS3.0实例教程:鼠标事件制作单选按钮。 我们将使用画图工具和ActionScript 3.0中的时间轴,鼠标事件做一个好看的单选按钮。 最终预览 我们先看一下最终作品: 点击顶端的按钮看有何反应。 第一步:概述 一个单选按钮或选项按钮是一个TuLaoShi.com图形用户界面元素,允许用户只选择一个预定...
标签: Web开发
事件是可以被JavaScript侦测到的行为。 事件 JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。 事件举例: 鼠标点击  页面或图像载入 ...
标签: Web开发
事件处理概述  事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行...
标签: Web开发
在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很重要的概念。javascript中的事件处理也是一样,正因为有了事件处理,才会出现Ajax拖动的效果。本文就讨论一下JavaScript中的事件处理,读过之后,您就会知道,很多Ajax框架实现拖动效果的原理了。 一、 IE Event对象 (一)IE Event对象的主要属性和方法 在IE中有一...
标签: Web开发
CSS高级布局已逐渐流行,但面对所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。 什么时候应该用DIV? 虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV: div id="header"这...

经验教程

298

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部