如何用jQuery实现页面加载默认选中首个checkbox、限制单选并控制对应div显隐

核心逻辑说明 #

• 封装通用的内容切换方法，避免页面加载和点击事件重复写逻辑
• 点击checkbox时先取消所有checkbox的选中状态，仅保留当前点击项的选中状态，实现单选效果
• 每次选中后隐藏所有绑定的div，仅展示当前选中checkbox对应的div
• 页面加载完成后直接触发第一个checkbox的选中逻辑，自动完成初始状态设置

完整可运行代码 #

JS代码 #

$(document).ready(function () {
  // 通用切换函数：传入当前选中的checkbox
  function switchFeature(checkedCheckbox) {
    // 先取消所有checkbox的选中状态
    $('.my-features').prop('checked', false);
    // 隐藏所有关联的div
    $('.my-features').each(function() {
      $('#' + $(this).data('name')).hide();
    });
    // 仅设置当前传入的checkbox为选中状态
    checkedCheckbox.prop('checked', true);
    // 仅展示当前checkbox对应的div
    $('#' + checkedCheckbox.data('name')).show();
  }

  // 绑定checkbox点击事件
  $('.my-features').on('click', function () {
    switchFeature($(this));
  });    

  // 页面加载时默认选中第一个checkbox并触发切换逻辑
  switchFeature($('input:checkbox.my-features').first());
});

HTML结构（和原有结构一致，无需修改） #

<input type="checkbox" data-name="div1" class="my-features" />DIV1
<input type="checkbox" data-name="div2" class="my-features" />DIV2
<input type="checkbox" data-name="div3" class="my-features" />DIV3
<input type="checkbox" data-name="div4" class="my-features" />DIV4
<input type="checkbox" data-name="div5" class="my-features" />DIV5
<input type="checkbox" data-name="div6" class="my-features" />DIV6

<div id="div1">1
</div>
<div id="div2">2
</div>
<div id="div3">3
</div>
<div id="div4">4
</div>
<div id="div5">5
</div>
<div id="div6">6
</div>

优化点说明 #

• 用prop替代attr设置选中状态，避免jQuery版本差异导致的选中不生效问题
• 统一使用data()方法读取自定义属性，写法更简洁
• 所有逻辑复用同一个切换函数，后续修改规则只需调整switchFeature方法即可
• 无需额外设置CSS初始隐藏，JS加载完成后会自动处理初始状态

内容的提问来源于stack exchange，提问作者pv619