HTML-CSS群中單選引發的“事件”

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

因為死神的一個選項按鈕問題，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">
<!-- 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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More