从多个方面探究jQuery Radio切换事件

YAGQ • 2024-10-04 00:16 • 编程

一、监听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元素，使其更符合整体样式。

原创文章，作者：YAGQ，如若转载，请注明出处：https://www.506064.com/n/136302.html