限制覆選框最多選擇項

来源:http://www.cnblogs.com/White-Quality/archive/2016/05/30/5541105.html
-Advertisement-
Play Games

在一個招聘網站中,通過限制用戶選擇職位標簽個數,可以精確定位用戶的職位。例如,以覆選框的形式為用戶提供一下備選職位標簽,限制用戶最多選擇3個,當超過三個時禁止用戶繼續選擇。 覆選框在問卷調查,招聘網站用的很廣,今天來介紹一下限制覆選框最多選擇幾項的方法: 思路: 監聽覆選框的onclick事件 監聽 ...


在一個招聘網站中,通過限制用戶選擇職位標簽個數,可以精確定位用戶的職位。例如,以覆選框的形式為用戶提供一下備選職位標簽,限制用戶最多選擇3個,當超過三個時禁止用戶繼續選擇。

覆選框在問卷調查,招聘網站用的很廣,今天來介紹一下限制覆選框最多選擇幾項的方法:

思路:

監聽覆選框的onclick事件

checkbox.onclick = function(){
  //代碼塊
}

監聽覆選框的checked屬性:

if(chckbox.checked){
  //代碼塊
}

HTML代碼:

< input type= "checkbox" name= "sport"/>籃球<br />
< input type= "checkbox" name= "sport"/>足球<br />
< input type= "checkbox" name= "sport"/>排球<br />
< input type= "checkbox" name= "sport"/>羽毛球<br/>
< input type= "checkbox" name= "sport"/>乒乓球<br/>
< p>最多選擇三項</p>

JavaScript代碼:

var sportSelect = document.getElementsByName('sport' ),
                           maxNums     = 3;
                      for(var i in sportSelect){
                           sportSelect[i]. onclick = function (){
                                 var _sportSelect = document.getElementsByName('sport' ),
                                     cNums            = 0;
                                 for(var i in _sportSelect){
                                      if(i == 'length') break ;
                                      if(_sportSelect[i].checked){
                                           cNums ++;
                                     }
                                }
                                 if(cNums > maxNums){
                                     this.checked = false;
                                        alert('最多只能選擇三項');
                                }
                           }
                     }

掃描微信二維碼關註微信公眾號:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:python中有好多可用性特別強的內置函數,熟練掌握對於以後的編程過程中有很大的幫助~~~~ callable函數、chr函數與ord函數、random函數、compile函數、evec與eval函數、dir函數,divmod函數、isinstance函數、filter與map函數 ...
  • 搞開發的人,包括我自己,有時缺少了對於價值的判斷能力。 昨天看了一篇關於聯想和華為的文章,有些感觸。裡面提到一個觀點,聯想是產品驅動,華為是技術驅動,導致了多年後兩家公司的巨大反差。 這其中就有個在互聯網公司的常態化問題:一般都是產品汪來領導技術猿,產品經理多數是項目經理的角色,主要的精力只能用在搞 ...
  • while迴圈是PHP中最簡單的迴圈,其基本格式為: 該語法表示,只要expr表達式為TRUE,那麼就一直執行statement直到expr為FALSE為止,statement表示要執行的動作或邏輯。 該例子迴圈輸出1到10。 原文地址:http://www.manongjc.com/php/php ...
  • 為了方便直觀我們使用Head插件提供的介面進行演示,實際上內部調用的RESTful介面。 RESTful介面URL的格式: http://localhost:9200/<index>/<type>/[<id>] 其中index、type是必須提供的。 id是可選的,不提供es會自動生成。 index ...
  • #include<stdio.h> #include<stdlib.h> #include<time.h> double jieguo(); void main(){ int i,k; int m,n; int j; printf("請輸入購買的號碼:\n"); scanf("%d",&i); j= ...
  • 偶爾調試代碼的時候會出現這種事情,之前並沒有特別註意,今天稍微搜集一下相關資料: 1.跳轉到的代碼的確沒有源碼,下載源碼後選擇源碼位置後便會正常顯示源碼. 2.源碼和class文件不一致.即便勾選了auto build選項,eclipse依然存在class沒有實時編譯的情況,致使我們當前的代碼和編譯 ...
  • SpringBoot啟動過程: 1、構建SpringApplication對象 2、執行run() 一、構建SpringApplication對象 說明: 實例化該類的時候會載入bean到applicationContext中去 這裡的入參是MySpringApplication.class這樣一個 ...
  • 本文結合實例詳述了策略模式的實現方式,並介紹瞭如何結合簡單工廠模式及Annotation優化策略模式。最後分析了策略模式的優缺點及已(未)遵循的OOP原則 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...