WeChat ミニプログラムコンポーネントの解釈と分析: チェックボックスオプションの紹介-ミニプログラム開発-php.cn

WeChat ミニプログラムコンポーネントの解釈と分析: チェックボックスオプションの紹介

高洛峰

リリース： 2017-03-19 17:32:04

オリジナル

2241 人が閲覧しました

チェックボックスの複数のオプションコンポーネントの説明:

チェックボックスはミニプログラムフォームコンポーネントのコンポーネントであり、その機能はユーザーがフォームで選択できるようにガイドすることです。

チェックボックスコンポーネントを使用するには、同じグループ内のすべてのチェックボックスタグに加えて、チェックボックスグループタグも使用する必要があります。

checkbox-group タグの機能は、onchange イベントを checkbox タグにバインドし、ユーザーが選択するときにユーザーをガイドすることです。

単一のチェックボックスタグは onchange イベントをトリガーしません。チェックボックスグループにバインドされている場合にのみトリガーされます。

checkboxチェックボックスコンポーネントコンポーネントサンプルコードは次のように実行されます。

WXML コードは次のとおりです:

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

ログイン後にコピー

以下は JS コードです:

Page({
  data:{
    item: [
      {&#39;name&#39;: &#39;俄罗斯&#39;, &#39;value&#39;: &#39;RS&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;美国&#39;, &#39;value&#39;: &#39;US&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;中国&#39;, &#39;value&#39;: &#39;CN&#39;, &#39;disabled&#39;: false, &#39;checked&#39;: true},
      {&#39;name&#39;: &#39;英国&#39;, &#39;value&#39;: &#39;UK&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;日本&#39;, &#39;value&#39;: &#39;JP&#39;, &#39;disabled&#39;: true}
    ]
  },
  changed: function(e) {
    console.info(&#39;你选择了&#39; + e.detail.value);
  }
})

ログイン後にコピー

以下は WXSS コードです:

.items {
    display: block;
    margin: 30rpx;
}

ログイン後にコピー

checkbox-group

プロパティ名データ型

説明

bindchange	EventHandle	で選択された項目が変更されると、change イベントがトリガーされます。detail = {value:[選択されたチェックボックスの値の配列]}
	checkbox