Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲一区综合,国产高清久久99,国产成人精品视频播放 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          零基礎(chǔ)教你學(xué)前端-30、單選和多選
          
        
           
          
	
	
          
		
                        
          節(jié)課，我們實(shí)現(xiàn)表單中的單選和多選功能。
          對(duì)于所有人而言，每天都會(huì)面臨各種各樣的選擇。例如：1000W和北大錄取通知書(shū)我該選哪一個(gè)？我是去考研還是去工作？地上有一張50元和一張100元，我要撿哪一張？
          在HTML中如何實(shí)現(xiàn)單選和多選呢?
          我們可以通過(guò)在 form 標(biāo)簽里，嵌入 input 標(biāo)簽，通過(guò)設(shè)置 input 標(biāo)簽的 type 屬性值來(lái)實(shí)現(xiàn)單選和多選。
          單選，type 的取值為 radio，radio 是收音機(jī)的意思，因?yàn)槲覀兪章?tīng)節(jié)目只能調(diào)到一個(gè)波段，因此用它來(lái)表示單選按鈕，就是讓用戶在有限的選擇中只選擇一個(gè)。
          多選，type 取值為 checkbox，譯為復(fù)選框，也叫多選框，讓用戶在有限的選擇中選擇更多的選項(xiàng)。
          我們來(lái)實(shí)現(xiàn)一個(gè)單選和多選的功能。
          打開(kāi)編輯器，新建一個(gè) radio_checkbox.html 文件，自動(dòng)補(bǔ)全基礎(chǔ)代碼，在body標(biāo)簽內(nèi)部編寫(xiě)一個(gè) form 表單標(biāo)簽，在 form 標(biāo)簽里面添加文本 選擇性別： (冒號(hào)讀出來(lái)) ，緊接著添加一個(gè) input 標(biāo)簽，設(shè)置標(biāo)簽的 type 屬性值為 radio，后面添加文本 "男"，回車換行。
          使用同樣的方法，再添加一個(gè) input 標(biāo)簽，設(shè)置標(biāo)簽的 type 屬性值為 radio，后面添加文本 "女"。保存。

          用瀏覽器打開(kāi)頁(yè)面，一組性別選擇的單選框顯示在頁(yè)面中。使用鼠標(biāo)點(diǎn)擊單選控件，這時(shí)你會(huì)發(fā)現(xiàn)單選框出現(xiàn)了問(wèn)題，性別居然能選擇多個(gè)?
          在這里需要提醒大家的是：
          單選框控件必須成組使用才有意義，并且每組至少需要兩個(gè)單選框。
          而“組”是通過(guò) name 屬性來(lái)建立的，凡是 name 值相同的就是一組。
          同組的單選框，只有一個(gè)會(huì)處在選中狀態(tài)，其他的會(huì)自動(dòng)呈現(xiàn)為未選中狀態(tài)。
          因此，如果沒(méi)有給單選框設(shè)置 name 屬性，默認(rèn)每個(gè)單選框自成一組，一旦選中這個(gè)單選框，要想通過(guò)點(diǎn)擊來(lái)解除選中狀態(tài)就做不到了。

          回到編輯器，為兩個(gè) input 單選框定義 name 屬性，值設(shè)置為 gender。保存。
          回到瀏覽器， 刷新。當(dāng)我們?cè)俅吸c(diǎn)擊性別選框的時(shí)候，單選的效果實(shí)現(xiàn)了。
          返回編輯器，在單選框結(jié)尾處添加一個(gè) br 標(biāo)簽。回車換行。
          輸入文本：前端基礎(chǔ)包括：在文本后輸入 input 中括號(hào) type 等于 checkbox，input[type=checkbox] 按下 tab 鍵，創(chuàng)建三個(gè)多選框控件。
          分別在每一個(gè) input 復(fù)選框后面添加文本 HTML、CSS、JavaScript。保存。

          回到瀏覽器，刷新，包含三個(gè)選項(xiàng)的復(fù)選框做好了。鼠標(biāo)點(diǎn)擊復(fù)選框，出現(xiàn)了對(duì)鉤，表示已經(jīng)選中，再次點(diǎn)擊選中的復(fù)選框，取消選擇。
          我們?cè)偎⑿乱幌马?yè)面，發(fā)現(xiàn)單選框和多選框在默認(rèn)情況下，都沒(méi)有選中。能不能在打開(kāi)頁(yè)面的時(shí)候，性別的男和前端基礎(chǔ)的HTML，默認(rèn)選中呢？
          單選框和多選框默認(rèn)選中效果，都可以通過(guò)定義 checked 屬性來(lái)實(shí)現(xiàn)，它的值只要不為空，任何字符都可以，通常我們會(huì)使用 checked 字符串作為它的值。另外，選中和取消選中只有兩個(gè)狀態(tài)，所以也可以不用定義值，只定義一個(gè)屬性名就可以了。
          返回編輯器，給第一個(gè)單選控件添加 checked 屬性，再給第一個(gè)多選控件添加 checked 屬性。保存。
          回到瀏覽器，刷新。性別和HTML默認(rèn)選中了。點(diǎn)擊其他控件，單選多選的功能依然有效。
          單選框和多選選框我們就講完了，快自己實(shí)現(xiàn)一下吧。
          文章配套視頻鏈接點(diǎn)我「鏈接」
          選按鈕
          單選按鈕主要是讓網(wǎng)頁(yè)瀏覽者在一組選項(xiàng)里只能選擇一個(gè)。代碼格式如下。
          <input type="radio" name=" " value=" " >
           其中type="radio"定義單選按鈕；name屬性定義單選按鈕的名稱，單選按鈕都是以組為單位使用的，在同一組中的單選項(xiàng)都必須用同一個(gè)名稱；value屬性定義單選按鈕的值，在同一組中域值必須是不同。
          （1）編寫(xiě)代碼如下圖所示，在<body>標(biāo)簽中加入以下代碼。
          （2）在瀏覽器中打開(kāi)文件，預(yù)覽效果圖如下所示，即可看到5個(gè)單選按鈕，用戶只能同時(shí)選擇其中一個(gè)。
          復(fù)選框
          復(fù)選框主要是讓網(wǎng)頁(yè)瀏覽者在一組選項(xiàng)里可以同時(shí)選擇多個(gè)選項(xiàng)。每個(gè)復(fù)選框都是一個(gè)獨(dú)立的元素，都必須有唯一的一個(gè)名稱。代碼格式如下。
          <input type="checkbox" name=" " value=" " >
          其中type="checkbox"定義復(fù)選框；name屬性定義復(fù)選框的名稱，在同一組中的復(fù)選框都必須用同一個(gè)名稱；value屬性定義復(fù)選框的值。
          （1）編寫(xiě)代碼如下圖所示，在<body>標(biāo)簽中加入以下代碼。
          （2）在瀏覽器中打開(kāi)文件，預(yù)覽效果圖如下所示，即可看到5個(gè)復(fù)選框，其中【人生大事】和【廣告專區(qū)】復(fù)選框被選中。
          習(xí)借助網(wǎng)絡(luò)技術(shù)將舊的單選按鈕轉(zhuǎn)換為具有現(xiàn)代外觀的單選卡。
          單選按鈕是表單的關(guān)鍵元素之一。當(dāng)以正確的方式使用時(shí)，這些是驚人的，因?yàn)樗鼈兒?jiǎn)化了從給定列表中選擇一個(gè)選項(xiàng)的任務(wù)。但是默認(rèn)的單選按鈕看起來(lái)不太好。我們需要對(duì)其進(jìn)行改造，使其在用戶看來(lái)令人驚嘆，這將顯著改善網(wǎng)站的用戶體驗(yàn)。
          在本文中，我將逐步介紹如何在 Web 應(yīng)用程序中實(shí)現(xiàn)自定義單選卡。在這里，我們將把舊的單選按鈕變成漂亮的 CSS 卡片。每張卡片都有一個(gè)檢查（勾號(hào)）圖標(biāo)，默認(rèn)情況下它是隱藏的，并且僅在用戶單擊卡片時(shí)才會(huì)出現(xiàn)。
          通過(guò) 3 個(gè)簡(jiǎn)單的步驟構(gòu)建令人驚嘆的無(wú)線電卡
          1. 使用 HTML 創(chuàng)建單選卡的布局。
          2. 使用 JavaScript 使無(wú)線電卡功能化。
          3. 使用 CSS 設(shè)計(jì)無(wú)線電卡。

          第 1 步：使用 HTML 創(chuàng)建單選卡的布局
          讓我們?yōu)槲覀兊膯芜x卡設(shè)置一個(gè)基本的 HTML 布局。它將包括一個(gè)容納卡片的容器。在其中，我們將添加三張卡片，每張卡片都有一個(gè)勾號(hào)（勾號(hào)）圖標(biāo)、一個(gè)卡片圖標(biāo)（圖像）、一個(gè)卡片標(biāo)簽（標(biāo)題）和一個(gè)卡片標(biāo)簽說(shuō)明（附加內(nèi)容）。每個(gè)無(wú)線電卡都有一個(gè)名為 radio-card 的通用類，為了使其正常工作，我們需要為每個(gè)無(wú)線電卡添加另一個(gè)獨(dú)特的類，例如 radio-card-1、radio-card-2、radio-card-3 和很快。這些卡片將有一個(gè) onclick 屬性，該屬性將調(diào)用名為 selectRadioCard() 的函數(shù)。在參數(shù)中傳遞卡號(hào)，如 1、2 或 3。我們將在下一步編寫(xiě)使卡片正常工作的邏輯。
          將以下代碼片段添加到您要實(shí)現(xiàn)自定義單選卡的部分。
          <div>
    <h1>Create Stunning Radio Cards Using HTML, CSS, and JavaScript</h1>
    <div id="radio-cards-container">
        <!-- Radio Card 1 -->
        <div class="radio-card radio-card-1" onclick="selectRadioCard('1')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-react.png" alt="React" />
                </div>
                <div class="radio-card-label">
                    React
                </div>
                <div class="radio-card-label-description">
                    Build an application using React.
                </div>
            </div>
        </div>
        <!-- Radio Card 2 -->
        <div class="radio-card radio-card-2" onclick="selectRadioCard('2')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-angular.png" alt="Angular" />
                </div>
                <div class="radio-card-label">
                    Angular
                </div>
                <div class="radio-card-label-description">
                    Build an application using Angular.
                </div>
            </div>
        </div>
        <!-- Radio Card 3 -->
        <div class="radio-card radio-card-3" onclick="selectRadioCard('3')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-vue.png" alt="Vue" />
                </div>
                <div class="radio-card-label">
                    Vue
                </div>
                <div class="radio-card-label-description">
                    Build an application using Vue.
                </div>
            </div>
        </div>
    </div>
</div>

          第 2 步：使用 JavaScript 使無(wú)線電卡功能化
          現(xiàn)在，我們需要實(shí)現(xiàn)當(dāng)用戶觸發(fā)卡片上的點(diǎn)擊事件時(shí)使單選卡片起作用的邏輯。 添加一個(gè)名為 selectRadioCard 的函數(shù)，它將接受一個(gè)名為 cardNo 的參數(shù)。 它將首先找到所有的無(wú)線電卡，然后遍歷它們中的每一個(gè)，并刪除選定的類。 之后，它將找到具有指定卡號(hào)的元素，如 radio-card-1、radio-card-2 或 radio-card-3，并將選擇的類添加到其中。
          在頁(yè)面上的腳本元素中添加以下代碼片段。 或者，您可以創(chuàng)建一個(gè)外部 JavaScript 文件并使用它。
          const selectRadioCard = (cardNo) => {
    /**
     * Loop through all radio cards, and remove the class "selected" from those elements.
     */
    const allRadioCards = document.querySelectorAll(".radio-card");
    allRadioCards.forEach((element, index) => {
        element.classList.remove(["selected"]);
    });
    /**
     * Add the class "selected" to the card which user has clicked on.
     */
    const selectedCard = document.querySelector(".radio-card-" + cardNo);
    selectedCard.classList.add(["selected"]);
};

          第 3 步：使用 CSS 設(shè)計(jì)無(wú)線電卡
          由于我們已經(jīng)完成了自定義單選卡的實(shí)現(xiàn)，我們需要添加一些 CSS 片段來(lái)設(shè)計(jì)我們的 HTML 內(nèi)容的布局。
          將以下代碼片段添加到頁(yè)面上的樣式元素。 或者，您可以創(chuàng)建一個(gè)外部 CSS 文件并使用它。
          #radio-cards-container {
    margin-top: 5rem;
    width: 75vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.radio-card {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 300px;
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding: 3rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.radio-card:hover {
    border: 2px solid #016787;
    cursor: pointer;
}

.radio-card-check {
    display: none;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
}

.radio-card-check i {
    font-size: 1.6rem;
    color: #016787;
}

.text-center {
    text-align: center;
}

.radio-card-icon img {
    width: 80px;
}

.radio-card-label {
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
}

.radio-card-label-description {
    margin-top: 0.5rem;
    color: rgba(0, 0, 0, 0.7);
}

.radio-card.selected {
    border: 2px solid #016787;
}

.radio-card.selected .radio-card-check {
    display: inline-flex;
}

          結(jié)果
          您已完成學(xué)習(xí)如何使用純 HTML、CSS 和 JavaScript 創(chuàng)建令人驚嘆的單選卡。
          關(guān)注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产精品一区二区久久精品|
国产av一区二区精品久久凹凸|
一区二区手机视频|
黑人大战亚洲人精品一区|
国产未成女一区二区三区|
日本不卡一区二区三区|
亚洲AV日韩精品一区二区三区|
伊人久久精品一区二区三区|
国产成人无码一区二区三区|
国产一区二区三区在线免费观看|
高清精品一区二区三区一区|
国产精品高清一区二区三区|
日韩人妻无码一区二区三区综合部|
国产视频一区在线播放|
亚洲国产一区二区三区在线观看|
亚洲av午夜福利精品一区人妖|
成人国产一区二区三区|
无码精品人妻一区二区三区影院|
精品国产高清自在线一区二区三区
|
亚洲一区二区三区高清不卡|
伊人激情AV一区二区三区|
av无码一区二区三区|
精品国产AⅤ一区二区三区4区|
国产一区二区在线|播放|
精品一区二区三区四区电影|
国产在线视频一区二区三区|
国产一区二区三区在线观看免费|
国产天堂在线一区二区三区|
亚州国产AV一区二区三区伊在|
一区二区三区视频网站|
一区视频在线播放|
久久久久人妻一区精品果冻|
国产在线精品一区二区夜色|
国产一区二区内射最近更新|
久久99热狠狠色精品一区|
久久精品无码一区二区无码|
精品国产一区AV天美传媒|
国产精品电影一区二区三区
|
无码精品人妻一区二区三区影院|
乱色熟女综合一区二区三区|
国产午夜毛片一区二区三区|