整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
先，在一個(gè)Form窗口中，我們可以定義3個(gè)radiobutton，radioButton1、radioButton2和radioButton3，以及button1和button2(這里可以是其他控件)。
為了實(shí)現(xiàn)單擊radioButton1時(shí)，button1顯示"A1"，button2顯示"A2";
單擊radioButton2時(shí)，button1顯示"B1"，button2顯示"B2";
單擊radioButton3時(shí)，button1顯示"C1"，button2顯示"C2".
下面的代碼就可以實(shí)現(xiàn)這個(gè)功能：
文介紹在鴻蒙應(yīng)用中RadioButton和RadioContainer組件的基本用法。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
增加RadioButton和RadioContainer組件
如下代碼中46行~66行所示，在布局中增加RadioButton和RadioContainer組件。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<Component
ohos:height="0vp"
ohos:weight="3"
ohos:width="match_parent"
/>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="center"
ohos:orientation="vertical">
<Image
ohos:id="$+id:image"
ohos:width="match_content"
ohos:height="match_content"
ohos:layout_alignment="center"
ohos:image_src="$media:DevEco"
/>
<TextField
ohos:id="$+id:text_field"
ohos:width="match_parent"
ohos:height="30vp"
ohos:text_size="20fp"
ohos:text_alignment="center"
ohos:hint="Please input text and press [Click me!] button."
ohos:background_element="$graphic:background_text_field"
/>
<Button
ohos:id="$+id:hello_button"
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="27fp"
ohos:text="Click me!"
ohos:layout_alignment="center"
ohos:background_element="$graphic:background_button"
ohos:margin="15vp"
ohos:right_padding="8vp"
ohos:left_padding="8vp"
/>
<RadioContainer
ohos:id="$+id:radio_container"
ohos:height="match_content"
ohos:width="match_content"
ohos:top_margin="32vp"
ohos:layout_alignment="horizontal_center"
ohos:orientation="horizontal">
<RadioButton
ohos:id="$+id:r24h"
ohos:height="40vp"
ohos:width="match_content"
ohos:text="24H"
ohos:marked="true"
ohos:text_size="20fp"/>
<RadioButton
ohos:id="$+id:r12h"
ohos:height="40vp"
ohos:width="match_content"
ohos:text="12H"
ohos:text_size="20fp"/>
</RadioContainer>
<TimePicker
ohos:id="$+id:time_picker"
ohos:24_hour_mode="false"
ohos:height="match_content"
ohos:width="match_parent"
ohos:layout_alignment="horizontal_center"
ohos:text_am="AM"
ohos:text_pm="PM"
ohos:normal_text_size="20fp"
ohos:selected_text_size="25fp"/>
</DirectionalLayout>
<Component
ohos:height="0vp"
ohos:weight="5"
ohos:width="match_parent"
/>
</DirectionalLayout>代碼中組件id被指定為radio_container，會(huì)在下面的響應(yīng)代碼中用到。
在代碼中使用RadioButton和RadioContainer組件
下面代碼中的第18行獲取RadioContainer組件后，在第22行根據(jù)RadioContainer的狀態(tài)更新TimePicker的形式，然后在第40行~43行為RadioContainer增加響應(yīng)處理，其內(nèi)容是同樣是根據(jù)選中的RadioButton的索引更新TimePicker的形式。
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.window.dialog.ToastDialog;
import java.time.LocalTime;
import java.time.temporal.ChronoUnit;
public class ComponentAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_component);
//獲取textfield輸入組件
TextField tf=(TextField) findComponentById(ResourceTable.Id_text_field);
//獲取button組件
Button button=(Button) findComponentById(ResourceTable.Id_hello_button);
//獲取RedioContainer組件
RadioContainer rcontainer=(RadioContainer)findComponentById(ResourceTable.Id_radio_container);
//獲取TimePicker組件
TimePicker picker=(TimePicker) findComponentById(ResourceTable.Id_time_picker);
//根據(jù)RadioContainer的狀態(tài)設(shè)定TimePicker的形式。
picker.set24Hour(rcontainer.getMarkedButtonId()==0);
// 為按鈕設(shè)置點(diǎn)擊事件回調(diào)
button.setClickedListener(new Component.ClickedListener() {
public void onClick(Component v) {
LocalTime rightNow=LocalTime.now();
LocalTime pickTime=LocalTime.of(picker.getHour(), picker.getMinute(), picker.getSecond());
String msg;
if(pickTime.isBefore(rightNow))
msg="所選時(shí)間比現(xiàn)在時(shí)刻早" + pickTime.until(rightNow, ChronoUnit.SECONDS) + "秒";
else if(pickTime.isAfter(rightNow))
msg="所選時(shí)間比現(xiàn)在時(shí)刻晚" + rightNow.until(pickTime, ChronoUnit.SECONDS) + "秒";
else
msg="所選時(shí)間和現(xiàn)在時(shí)刻一樣";
new ToastDialog(getContext())
.setText(msg)
.show();
}
});
//為RadioContainer設(shè)置事件響應(yīng)
rcontainer.setMarkChangedListener((radioContainer1, index) -> {
picker.set24Hour(index==0);
});
//為TimePicker設(shè)定事件響應(yīng)
picker.setTimeChangedListener(
new TimePicker.TimeChangedListener() {
@Override
public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {
tf.setText(hour + ":" + minute + ":" + second);
}
}
);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}畫面顯示如下：
參考文檔
RadioContainer組件：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-radiocontainer-0000001063470429
RadioContainer類：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/radiocontainer-0000001054678720
RadioButton組件
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-radiobutton-0000001060647792
RadioButton類
https://developer.harmonyos.com/cn/docs/documentation/doc-references/radiobutton-0000001054518732
新書介紹
《實(shí)戰(zhàn)Python設(shè)計(jì)模式》是作者最近出版的新書，拜托多多關(guān)注！
本書利用Python 的標(biāo)準(zhǔn)GUI 工具包tkinter，通過可執(zhí)行的示例對23 個(gè)設(shè)計(jì)模式逐個(gè)進(jìn)行說明。這樣一方面可以使讀者了解真實(shí)的軟件開發(fā)工作中每個(gè)設(shè)計(jì)模式的運(yùn)用場景和想要解決的問題；另一方面通過對這些問題的解決過程進(jìn)行說明，讓讀者明白在編寫代碼時(shí)如何判斷使用設(shè)計(jì)模式的利弊，并合理運(yùn)用設(shè)計(jì)模式。
對設(shè)計(jì)模式感興趣而且希望隨學(xué)隨用的讀者通過本書可以快速跨越從理解到運(yùn)用的門檻；希望學(xué)習(xí)Python GUI 編程的讀者可以將本書中的示例作為設(shè)計(jì)和開發(fā)的參考；使用Python 語言進(jìn)行圖像分析、數(shù)據(jù)處理工作的讀者可以直接以本書中的示例為基礎(chǔ)，迅速構(gòu)建自己的系統(tǒng)架構(gòu)。
覺得本文有幫助？請分享給更多人。
關(guān)注微信公眾號【面向?qū)ο笏伎肌枯p松學(xué)習(xí)每一天！
面向?qū)ο箝_發(fā)，面向?qū)ο笏伎迹?/span>
篇文章主要的向大家介紹了關(guān)于html input標(biāo)簽的單選按鈕的使用方法，還有關(guān)于HTML input標(biāo)簽的單選默認(rèn)按鈕的做法。接下來我們一起來看看這篇文章吧
<input> 標(biāo)簽用于搜集用戶信息。根據(jù)不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。
> <form action="form_action.asp" method="get">
>
> <input type="radio" name="radio" value="1">單選1
>
> <input type="radio" name="radio" value="2">單選2
>
> <input type="radio" name="radio" value="3">單選3
>
> <input type="radio" name="radio" value="4">單選4
>
> </form>這個(gè)的效果很容易看到，我們還是先看看瀏覽器中的顯示效果吧：
這個(gè)效果一眼就能看到，很簡單的一個(gè)代碼
還有種是很多網(wǎng)站上都是經(jīng)常見到的，比如：單選性別，這個(gè)基本上都是用這種單選框去制作的。代碼如下：
HTML中的單選按鈕實(shí)現(xiàn)男女性別選擇，不讓男女同是都能都能選擇，實(shí)現(xiàn)方法：在按鈕的屬性里寫一個(gè)name屬性，并且把name的值設(shè)置成相同的
> <input id="man" type="radio" checked="checked" name="1" />男
>
> <input id="woman" type="radio" name="1"/>女這個(gè)就不給圖了，比上面那個(gè)還簡單，就兩個(gè)單選框，我們經(jīng)常遇到的這個(gè)。
現(xiàn)在來說說HTML單選框按鈕怎么默認(rèn)選中：
首先我們先把第一個(gè)實(shí)例拿出來繼續(xù)說，我們只需要在其中加一個(gè)屬性，如下：
> <form action="form_action.asp" method="get">
>
> <input type="radio" name="radio" value="1">單選1
>
> <input type="radio" name="radio" value="2" checked>單選2
>
> <input type="radio" name="radio" value="3">單選3
>
> <input type="radio" name="radio" value="4">單選4
>
> </form>這上面我沒做任何的點(diǎn)擊，自己出現(xiàn)在那上面的，刷新過后還能看到在單選2上面。
我們就可以看到，這樣就把單選框給默認(rèn)選中了，大家可以自己試試，多敲敲代碼。
好了，以上就是這篇關(guān)于html input標(biāo)簽做單選按鈕的文章了，有問題的可以在下方提問。
以上就是html單選按鈕默認(rèn)選中怎么做？input標(biāo)簽的單選按鈕用法實(shí)例的詳細(xì)內(nèi)容，更多請關(guān)注我！！！
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個(gè)月整理了一份最適合2020年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
