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

  因为死神的一个单选按钮问题,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>