從多個方面探究jQuery Radio切換事件

一、監聽Radio切換事件

要監聽Radio切換事件，我們需要找到Radio並註冊事件。可以通過選擇器找到Radio元素並註冊change事件：

$(document).ready(function(){
  $('input[type=radio]').change(function(){
    // 執行相應的邏輯
  });
});

上述代碼中，$(‘input[type=radio]’)選擇器表示選中所有type為radio的input元素，添加change事件。當我們點擊或選擇Radio後，change事件便會觸發。

二、獲取選中的Radio值

在Radio切換事件中，我們經常需要獲取選中的Radio值。可以通過判斷Radio是否checked來獲取選中的值：

$(document).ready(function(){
  $('input[type=radio]').change(function(){
    if($(this).prop('checked')){
      var selectedValue = $(this).val();
      // 執行相應的邏輯
    }
  });
});

上述代碼中，$(this)表示觸發change事件的Radio元素，通過.prop(‘checked’)方法判斷Radio是否選中，若選中則通過.val()方法獲取選中的值。

三、根據Radio值控制元素顯示

利用Radio切換事件，我們可以根據選中的Radio值來控制元素是否顯示。代碼示例如下：

$(document).ready(function(){
  $('input[type=radio]').change(function(){
    var selectedValue = $(this).val();
    if(selectedValue === 'option1'){
      $('#elem1').show();
      $('#elem2').hide();
    } else if(selectedValue === 'option2'){
      $('#elem1').hide();
      $('#elem2').show();
    }
  });
});

上述代碼中，當選中Radio值為option1時，顯示id為elem1的元素並隱藏id為elem2的元素；當選中Radio值為option2時，則相反，顯示id為elem2的元素並隱藏id為elem1的元素。

四、根據Radio值禁用/啟用元素

利用Radio切換事件，我們也可以根據選中的Radio值來控制元素是否啟用或禁用。代碼示例如下：

$(document).ready(function(){
  $('input[type=radio]').change(function(){
    var selectedValue = $(this).val();
    if(selectedValue === 'option1'){
      $('#elem1').prop('disabled', true);
      $('#elem2').prop('disabled', false);
    } else if(selectedValue === 'option2'){
      $('#elem1').prop('disabled', false);
      $('#elem2').prop('disabled', true);
    }
  });
});

上述代碼中，當選中Radio值為option1時，禁用id為elem1的元素並啟用id為elem2的元素；當選中Radio值為option2時，則相反，啟用id為elem1的元素並禁用id為elem2的元素。

五、自定義Radio樣式

當Radio元素使用默認樣式時，可能會與其他元素不協調，此時我們可以通過自定義樣式來美化Radio元素。

input[type="radio"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  border: 2px solid #ccc;
  width: 20px;
  height: 20px;
  outline: none;
  margin: 0 5px 0 0;
}

input[type="radio"]:checked {
  border-color: #007bff;
  background-color: #007bff;
}

上述樣式中，利用appearance:none;屬性去掉Radio默認樣式，然後通過自定義樣式來美化Radio元素，使其更符合整體樣式。