WeChat アプレットのチェックボックスコンポーネントの詳細なコード例-ミニプログラム開発-php.cn

WeChat アプレットのチェックボックスコンポーネントの詳細なコード例

高洛峰

リリース： 2018-05-10 15:41:17

オリジナル

2419 人が閲覧しました

この記事では主に、WeChat アプレットのチェックボックスコンポーネントの詳細な説明と簡単な例を紹介します。必要な場合は、

実装レンダリングを参照してください:

WeChat アプレットのチェックボックスコンポーネントの詳細なコード例

checkbox-group

multi-select プロジェクトグループ。 , 内部は複数のcheckboxで構成されています。

チェックボックスグループにはチェックボックスのみを含めることができます

属性名	タイプ	デフォルト値	説明
bindchange	EventHandle		チェックボックスグループで選択した項目がトリガーを変更します変更イベント、detail = {value:[選択されたチェックボックスの値の配列]}

checkbox

複数選択項目。

disabledBooleanfalse無効かどうかcheckedBooleanfalse現在選択されているかどうか、デフォルトの選択を設定するために使用できます

属性名	タイプ	説明
value	String	チェックボックスの識別、選択されたときにチェックボックスグループの変更イベントをトリガーする、チェックボックスの値をキャリー

例:

<checkbox-group bindchange="checkboxChange">
 <label class="checkbox" wx:for-items="{{items}}">
 <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</checkbox-group>

ログイン後にコピー

Page({
 data: {
 items: [
 {name: &#39;USA&#39;, value: &#39;美国&#39;},
 {name: &#39;CHN&#39;, value: &#39;中国&#39;, checked: &#39;true&#39;},
 {name: &#39;BRA&#39;, value: &#39;巴西&#39;},
 {name: &#39;JPN&#39;, value: &#39;日本&#39;},
 {name: &#39;ENG&#39;, value: &#39;英国&#39;},
 {name: &#39;TUR&#39;, value: &#39;法国&#39;},
 ]
 },
 checkboxChange: function(e) {
 console.log(&#39;checkbox发生change事件，携带value值为：&#39;, e.detail.value)
 }
})

ログイン後にコピー

読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトをサポートしていただきありがとうございます!

以上がWeChat アプレットのチェックボックスコンポーネントの詳細なコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。