YuShu Hsiao

今天碰到一個需求，我要在RadioButton點選之後，在前端的JS做一些狀態處理，

根據以前的經驗，這個需求非常簡單，只要加上onclick事件就解決了，

但是我的RadioButton跟Label室友關聯性的，點選Label顯示文字的時候，

RadioButton也要勾選，Razor產生的語法如下:

<div class="col-md-10">
	<div class="radio-inline">
		@Html.RadioButtonFor(c => c.condition.RESET_TYPE, "F", new { id = Html.IdFor(c => c.condition.RESET_TYPE) + "_FORGET", style = "cursor:pointer;" })
		@Html.Label(Html.IdFor(c => c.condition.RESET_TYPE) + "_FORGET", "顯示文字1", new { @class = "", style = "cursor:pointer;"})
	</div>
	<div class="radio-inline">
		@Html.RadioButtonFor(c => c.condition.RESET_TYPE, "S", new { id = Html.IdFor(c => c.condition.RESET_TYPE) + "_SIX", style = "cursor:pointer;" })
		@Html.Label(Html.IdFor(c => c.condition.RESET_TYPE) + "_SIX", "顯示文字2", new { @class = " ", style = "cursor:pointer;" })
	</div>
	<div class="radio-inline">
		@Html.RadioButtonFor(c => c.condition.RESET_TYPE, "O", new { id = Html.IdFor(c => c.condition.RESET_TYPE) + "_OTHER", style = "cursor:pointer;" })
		@Html.Label(Html.IdFor(c => c.condition.RESET_TYPE) + "_OTHER", "顯示文字3", new { @class = " ", style = "cursor:pointer;"})
	</div>
</div>

再點選顯示文字的時候，RadioButton 要勾選/取消，那Click事件要加在哪裡呢?

我測試了三種方式

1.<div class="radio-inline">

2.只加在Label

3.RadioButton跟Label都加上去

第一種加法，點選Lable顯示文字的時候，Click事件會被觸發兩次

第二種加法，點選RadioButton的時候不會觸發事件

第三種加法，點選Lable顯示文字的時候，Click事件會被觸發兩次

最後解決方法，改用JS去初始化

$(function () {
    $('input:radio[name="condition.RESET_TYPE"]').change(
    function () {
        if ($(this).is(':checked') && $(this).val() == 'O') {
            //可以根據判斷的值去分析 要做什麼事情
        }
        else {
            //Other Things
        }
    });
});

這樣不管是點選RadioButton OR Label，都會只觸發一次Click事件。