使用jQuery操作CheckBox与radio

checkbox用法

页面写法, 同一个选项里的设置同一个name

 <div class="li-check">
   <input type="checkbox" class="hobby" name="hobby" value="0" checked>篮球  //使用checked可以在页面初始化的时候默认选中

  </div>
 <div class="li-check">
   <input type="checkbox" class="hobby" name="hobby" value="1">足球
  </div>
 <div class="li-check">
   <input type="checkbox" class="hobby" name="hobby" value="2">羽毛球
  </div>

  

点击的时候判断当前是选中还是取消

  $('[name="hobby"]').click(function () {
      const isCheck = $(this).is(":checked")
      console.log(567, $(this).is(":checked"))
  })

　　

  手动设置取消,选中

  // 有两种方式
  $(".hobby:eq(0)").attr('checked', true)
  $(".hobby:eq(0)").attr('checked', false)


  $(".hobby:eq(1)").prop('checked', true)
  $(".hobby:eq(1)").prop('checked', false)

　　

这两种方式都可以设置,但是有些jQuery版本原因,使用attr设置的页面的选择样式不会改变,官网也推荐如果是

radio或者CheckBox等设置true和false的属性使用prop

 

获取选择的值

$("input:checked").each(function(){
  console.log($(this).val()) // 获取到选中的val值或者其他属性
})

radio用法

<div class="li-check">
  <input type="radio" class="grade" name="grade" value="0" />小学
</div>
<div class="li-check">
  <input type="radio" class="grade" name="grade" value="1" checked />初中 // 默认选中
</div>
<div class="li-check">
  <input type="radio" class="grade" name="grade" value="2" />高中
</div>

radio 设置相同的name会互斥,实现只能选择一个的效果

checked设置默认选中

手动设置取消,选中

方式和CheckBox一样

$(".grade:eq(1)").prop('checked', true) // 选中
$(".grade:eq(1)").prop('checked', false) // 取消选中

获取选择的值

const value = $(".grade:checked").val()