jQuery单选按钮

简介

单选按钮，也叫单选框，是用户在一组选项中只能选择一个的控件。通过使用jQuery，可以简单地创建和操作单选按钮。

创建单选按钮

通过调用 jQuery() 函数并使用合适的选择器创建一个单选按钮组的jQuery对象，然后使用 append() 函数将单选按钮添加到DOM中。

$(function() {
  var radioButtonGroup = $('<div></div>').attr('id', 'radioButtonGroup');
  $('body').append(radioButtonGroup);  // 将单选按钮组添加到DOM中
  
  var radioButtons = ['Option 1', 'Option 2', 'Option 3'];
  for (var i = 0; i < radioButtons.length; i++) {
    var radioButton = $('<input/>').attr({
      type: 'radio',
      name: 'radioButtonGroup',
      value: radioButtons[i]
    });
    var label = $('<label></label>').text(radioButtons[i]);
    radioButtonGroup.append(radioButton).append(label);  // 将单选按钮和标签添加到单选按钮组中
  }
});

操作单选按钮

使用 :checked 选择器可以获取当前选中的单选按钮。使用 prop() 函数可以设置或获取属性值。

$(function() {
  $('#radioButtonGroup input[type=radio]').change(function() {
    var selectedOption = $('input[name=radioButtonGroup]:checked').val();
    console.log('Selected option:', selectedOption);
  });
  
  // 选中某个单选按钮
  $('#radioButtonGroup input[type=radio][value=Option 2]').prop('checked', true);
});

自定义单选按钮

可以使用CSS样式来美化单选按钮，也可以使用第三方库（如bootstrap）来自定义样式。

input[type="radio"] {
  height: 20px;
  width: 20px;
}

input[type="radio"]::before {
  content: "";
  display: inline-block;
  height: 20px;
  width: 20px;
  border: 1px solid #bbb;
  border-radius: 50%;
  margin-right: 10px;
}

input[type="radio"]:checked::before {
  background-color: #428bca;
}

总结

通过jQuery操作单选按钮，可以创建、操作和自定义单选按钮，提供了一种灵活、简单的方法来实现用户输入控件。