國泰產險

聲明事項：動態載入，預設全選

元件：agreement001

JS：https://insweb.doinsane.co/js/comp/agreement001.js

JSON：https://insweb.doinsane.co/json/agreement001.json

Default

Preview

檢查用：

請詳閱並同意以下聲明事項

請滑至底部

個資法告知事項

國泰產險網站服務使用約定書

網路投保聲明事項

網路保險服務聲明事項

個資法告知事項

國泰產險網站服務使用約定書

HTML

將agreement value 設為 true


<input type="text" name="agreement" value="true" />

protectionTermFlagY 設為 checked


<input checkboxItem id="protectionTermFlagY" name="protectionTermFlag" type="checkbox" value="Y" class="tw-form-checkbox" onchange="doCheckProtectionTermFlag();" checked/>


<div agreement001 data-prevent-init="true" data-finish="true" data-plugin="comp/agreement001" data-type="comp" data-comp-name="agreement001">
    <style>
        [agreement001Label] [agreement001LabelChecked] {
        display: none;
        }
        [agreement001Label] [agreement001LabelNo] {
        display: flex;
        }
        [agreement001Label].tw-active [agreement001LabelNo] {
        display: none;
        }
        [agreement001Label].tw-active [agreement001LabelChecked] {
        display: flex;
        }
        [agreement001].tw-has-error [agreement001Hint] {
        color: #de3730 !important;
        }
    </style>
    <script agreement001ItemTemplate type="text/template">
    <div agreement001Item class="tw-px-16 lg:tw-px-32">{content}</div>
    </script>
    <div class="tw-form-container">
        <div>
        <div class="tw-hidden">檢查用：
            <input type="text" name="agreement" value="false" />
        </div>
        <div agreement001Hint class="tw-form-description tw-mt-4">請詳閱並同意以下聲明事項</div>
        <div class="tw-form-panel tw-mt-16 tw-px-0 tw-pb-16 lg:tw-px-0">
            <div agreement001Wrap class="tw-h-[247px] tw-max-h-[247px] tw-overflow-y-scroll">
            </div>
            <div class="tw-flex tw-justify-center tw-bg-neutral-50 tw-px-16 tw-py-8">
            <div class="text-body-l tw-leadning-none tw-text-neutral-700">請滑至底部</div>
            </div>
            <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-x-24 tw-gap-y-24 tw-bg-white tw-pt-16 md:tw-flex-row md:tw-flex-wrap">
            <div agreement001Label class="tw-flex tw-cursor-pointer tw-items-center tw-text-black hover:tw-text-primary-500">
                <div agreement001LabelNo class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-neutral-300 tw-text-[10px] tw-font-bold tw-text-neutral-300">
                <div>1</div>
                </div>
                <div agreement001LabelChecked class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-primary-300 tw-bg-primary-200 tw-text-[10px] tw-font-bold tw-text-primary-900">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.833374 4.07018L3.51195 6.83333L9.16671 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                </div>
                <div class="tw-ml-4">個資法告知事項</div>
            </div>
            <div agreement001Label class="tw-flex tw-cursor-pointer tw-items-center tw-text-black hover:tw-text-primary-500">
                <div agreement001LabelNo class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-neutral-300 tw-text-[10px] tw-font-bold tw-text-neutral-300">
                <div>2</div>
                </div>
                <div agreement001LabelChecked class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-primary-300 tw-bg-primary-200 tw-text-[10px] tw-font-bold tw-text-primary-900">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.833374 4.07018L3.51195 6.83333L9.16671 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                </div>
                <div class="tw-ml-4">國泰產險網站服務使用約定書</div>
            </div>
            <div agreement001Label class="tw-flex tw-cursor-pointer tw-items-center tw-text-black hover:tw-text-primary-500">
                <div agreement001LabelNo class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-neutral-300 tw-text-[10px] tw-font-bold tw-text-neutral-300">
                <div>3</div>
                </div>
                <div agreement001LabelChecked class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-primary-300 tw-bg-primary-200 tw-text-[10px] tw-font-bold tw-text-primary-900">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.833374 4.07018L3.51195 6.83333L9.16671 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                </div>
                <div class="tw-ml-4">網路投保聲明事項</div>
            </div>
            <div agreement001Label class="tw-flex tw-cursor-pointer tw-items-center tw-text-black hover:tw-text-primary-500">
                <div agreement001LabelNo class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-neutral-300 tw-text-[10px] tw-font-bold tw-text-neutral-300">
                <div>4</div>
                </div>
                <div agreement001LabelChecked class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-primary-300 tw-bg-primary-200 tw-text-[10px] tw-font-bold tw-text-primary-900">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.833374 4.07018L3.51195 6.83333L9.16671 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                </div>
                <div class="tw-ml-4">網路保險服務聲明事項</div>
            </div>
            <!-- / -->
            <div agreement001Label class="tw-flex tw-cursor-pointer tw-items-center tw-text-black hover:tw-text-primary-500">
                <div agreement001LabelNo class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-neutral-300 tw-text-[10px] tw-font-bold tw-text-neutral-300">
                <div>5</div>
                </div>
                <div agreement001LabelChecked class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-primary-300 tw-bg-primary-200 tw-text-[10px] tw-font-bold tw-text-primary-900">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.833374 4.07018L3.51195 6.83333L9.16671 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                </div>
                <div class="tw-ml-4">個資法告知事項</div>
            </div>
            <div agreement001Label class="tw-flex tw-cursor-pointer tw-items-center tw-text-black hover:tw-text-primary-500">
                <div agreement001LabelNo class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-neutral-300 tw-text-[10px] tw-font-bold tw-text-neutral-300">
                <div>6</div>
                </div>
                <div agreement001LabelChecked class="tw-flex tw-h-20 tw-w-20 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border-2 tw-border-primary-300 tw-bg-primary-200 tw-text-[10px] tw-font-bold tw-text-primary-900">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.833374 4.07018L3.51195 6.83333L9.16671 1" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                </div>
                <div class="tw-ml-4">國泰產險網站服務使用約定書</div>
            </div>
            </div>
        </div>
        <div agreement001Checkbox class="tw-mt-16 tw-px-24">
            <div class="tw-form-group">
            <div class="tw-flex tw-items-start">
                <input checkboxItem id="protectionTermFlagY" name="protectionTermFlag" type="checkbox" value="Y" class="tw-form-checkbox" onchange="doCheckProtectionTermFlag();" />
                <label for="protectionTermFlagY" class="tw-form-checkbox-label" checked></label>
            </div>
            <div class="tw-form-error-msg tw-mt-2 tw-pl-16"></div>
            </div>
        </div>
        </div>
    </div>
</div>


<script>
    function initAgreement(term1, term2, term3, term4, term5, term6, protectionTerm) {
        const agreement001 = document.querySelector('[agreement001]')
        const agreement001CheckboxLabel = agreement001.querySelector('[agreement001Checkbox] label')
        agreement001CheckboxLabel.textContent = ''
        const agreement001wrap = agreement001.querySelector('[agreement001wrap]')
        agreement001wrap.textContent = ''
        const itempTemplate = agreement001.querySelector('[agreement001ItemTemplate]').textContent.trim()
        //
        const htmlAry = []
        htmlAry.push(itempTemplate.replace(/{content}/g, term1))
        htmlAry.push(itempTemplate.replace(/{content}/g, term2))
        htmlAry.push(itempTemplate.replace(/{content}/g, term3))
        htmlAry.push(itempTemplate.replace(/{content}/g, term4))
        htmlAry.push(itempTemplate.replace(/{content}/g, term5))
        htmlAry.push(itempTemplate.replace(/{content}/g, term5))
        agreement001wrap.innerHTML = htmlAry.join('')
        //
        const agreement001Instance = new this['agreement001']()
        agreement001Instance.init(agreement001)
        agreement001CheckboxLabel.textContent = protectionTerm
    }
</script>


<script>
    function getData() {
        fetch('/json/agreement001.json')
        .then((response) => {
            if (response.ok) {
            return response.json()
            } else {
            throw new Error('Network response was not ok')
            }
        })
        .then((data) => {
            initAgreement(data.terms1, data.terms2, data.terms3, data.terms4, data.terms5, data.terms6, data.protectionTerm)
        })
        .catch((error) => {
            console.error('Error fetching data:', error)
        })
    }
</script>

Validate Code Reference

請依照實際開發狀況調整

HTML

onchange="doCheckProtectionTermFlag();"


<div agreement001Checkbox class="tw-mt-16 tw-px-24">
  <div class="tw-form-group">
    <div class="tw-flex tw-items-start">
      <input checkboxItem id="protectionTermFlagY" name="protectionTermFlag" type="checkbox" value="Y" class="tw-form-checkbox" onchange="doCheckProtectionTermFlag();" />
      <label for="protectionTermFlagY" class="tw-form-checkbox-label"></label>
    </div>
    <div class="tw-form-error-msg tw-mt-2 tw-pl-16"></div>
  </div>
</div>


<script>
    function doCheckProtectionTermFlag() {
        const name = 'protectionTermFlag'
        const elm = document.querySelector(`[name=${name}]`)
        if (document.querySelector('[name=agreement]').value === 'false') {
            document.querySelector('[agreement001Hint]').style.color = '#FF0000'
            scrollToElm(document.querySelector('[name=agreement]'))
            elm.checked = false
            return
        } else {
            document.querySelector('[agreement001Hint]').style = ''
        }
    }
</script>