###### tags: `JavaScript` `前端切版技巧`

# 金流方式四選一,被選擇付款方式打勾並加上外框色(單選/複選效果)
### 本文章重點
### 1.用JS控制CSS
### 2.用JS控制只能四個單選一,禁止多選
### 3.用.class .class搭配JS打開/關起(toggle)class
###

BUTTON ONCLICK FUNCTION參考[本篇](https://hackmd.io/@harmonia/JS-BUTTON_ONCLICK_FUNCTION)

[stackoverflow搭配jQuery參考](https://stackoverflow.com/questions/37665863/using-jquery-to-select-only-one-element-of-a-type-at-a-time)

#### [作法一]
<iframe height="265" style="width: 100%;" scrolling="no" title="click and add tick" src="https://codepen.io/corly74/embed/OJRvLNr?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/corly74/pen/OJRvLNr'>click and add tick</a> by peiyun
(<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

<br>
<br>
<p >
1.利用<kbd> < div class="虛擬open" > </ div> </kbd> 包覆
虛擬open的class,本身沒有樣式,是作為拿來控制操作開關使用,用Javascript or jQuery操作加入.

</p>

<p>
2.但是會發現一個問題,點擊第一個卡片時有達到我們要的效果:產生打勾和外光暈陰影效果,但是點擊第二個效果時,第一個點擊依然同時存在,但是金流方式一次只能選擇一個,不能同時使用兩種金流方式,所以每次點擊都要清掉原本添加的class,後來找到新的寫法,解決問題,請看方法二
</p>

#### [作法二]
<iframe height="265" style="width: 100%;" scrolling="no" title="click and add tick(single choice)" src="https://codepen.io/corly74/embed/NWRYKXW?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/corly74/pen/NWRYKXW'>click and add tick(single choice)</a> by peiyun
(<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<br>
<p>

之前把四種不同支付方式的open class和tick都單獨設不同class,這邊通通統一用一樣的<kbd>choice-card</kbd>,<kbd>openclass</kbd> ,<kbd>tick</kbd>和<kbd>card-shadow</kbd>.預設所有狀態都已經有加上<kbd>openclass</kbd> ,當選取點選<kbd>choice-card</kbd>先移除網頁裡所有<kbd>openclass</kbd>,再點選自身<kbd>this</kbd>上面加上<kbd>openclass</kbd>,以打開該支付方式<kbd>tick</kbd>和<kbd>tick</kbd>&<kbd>card-shadow</kbd>
</p>