使用jQuery操作CheckBox與radio
阿新 • • 發佈：2020-11-19
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 />初中 // 預設選中radio設定相同的name會互斥,實現只能選擇一個的效果 checked設定預設選中</div> <div class="li-check"> <input type="radio" class="grade" name="grade" value="2" />高中 </div>
手動設定取消,選中 方式和CheckBox一樣
$(".grade:eq(1)").prop('checked', true) // 選中
$(".grade:eq(1)").prop('checked', false) // 取消選中
獲取選擇的值
const value = $(".grade:checked").val()