Checkbox.elm

module Main exposing (main)

import Browser
import Html exposing (Attribute, Html, button, div, input, label, p, text)
import Html.Attributes exposing (type_)
import Html.Events exposing (on, onClick, targetChecked)
import Json.Decode as JD


type alias Model =
    { checkedValues : List String }


initialModel : Model
initialModel =
    { checkedValues = [] }


type Msg
    = UpdateCheckedValue String Bool


update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateCheckedValue value checked ->
            if checked then
                { model | checkedValues = value :: model.checkedValues }
            else
                { model | checkedValues =  List.filter (\v -> not  <|  v == value) model.checkedValues }


view : Model -> Html Msg
view model =
    div []
        [ input [ type_ "checkbox", onChecked <| UpdateCheckedValue "foo" ] []
        , label [] [ text "foo" ]
        , input [ type_ "checkbox", onChecked <| UpdateCheckedValue "bar" ] []
        , label [] [ text "bar" ]
        , p []
            [ text <|
               String.join ", " model.checkedValues
            ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }


onChecked : (Bool -> msg) -> Attribute msg
onChecked onCheckedAction =
    on "change" <| JD.map onCheckedAction targetChecked