jq,vue动态选中checkbox和radio

最新推荐文章于 2025-06-16 03:14:02 发布

原创最新推荐文章于 2025-06-16 03:14:02 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#radio #checkbox #jq #vue

js/jq 同时被 2 个专栏收录

13 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文详细介绍了如何使用jQuery和Vue.js分别控制页面上的单选框和复选框。包括通过标签名、类名和ID选择元素，并在Vue动态渲染的数据环境中实现相同功能。此外，还提供了在Vue中使用v-model绑定数据来控制单选和复选框状态的方法。

jq选中单选框、复选框

2019-03-28
遇到了一个checkbox和radio选中的问题，有一个不好用jq控制选中，但是具体出现的问题忘记了，先存个档，以后再补充。

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="box_radio">
			<input type="radio" class="radio" name="radio" id="radio1" />
			<input type="radio" class="radio" name="radio" id="radio2" />
			<input type="radio" class="radio" name="radio" id="radio3" />
		</div>
		<div class="box_checkbox">
			<input type="checkbox" class="checkbox" name="checkbox" id="checkbox1" />
			<input type="checkbox" class="checkbox" name="checkbox" id="checkbox2" />
			<input type="checkbox" class="checkbox" name="checkbox" id="checkbox3" />
		</div>
	</body>
</html>

js中三种方法都可以选中元素：
（1）标签名

	$("input[type=radio]").eq(0).attr("checked","checked");
	$("input[type=checkbox]").eq(0).attr("checked","checked");

（2）class名

	$(".radio").eq(1).attr("checked","checked");
	$(".checkbox").eq(1).attr("checked","checked");

（3）id

	$("#radio3").attr("checked","checked");
	$("#checkbox3").attr("checked","checked");

vue动态渲染的数据，选中单选框、复选框

2019-04-11 补充
回想起来之前的问题是同时使用了vue和jq出现的，然后先复现一下当时的问题

<div id="main">
	<form>
		<div class="box_radio">
			<input v-for="(item,index) in list1" :value="item.name" type="radio" class="radio" name="radio" :id="_radio(index)" />
		</div>
		<div class="box_checkbox">
			<input v-for="(item,index) in list2" :value="item.name" type="checkbox" class="checkbox" name="checkbox" :id="_checkbox(index)" />
		</div>
	</form>
</div>

vue结构：

var vm = new Vue({
	el:"#main",
	data:{
		list1: [
			{name: '111'},
			{name : '222'},
			{name : '333'},
		],
		list2: [
			{name : '111'},
			{name : '222'},
			{name : '333'},
		]
	},
	methods: {
		_checkbox: function(i){
			return "checkbox"+(i+1);
		},
		_radio: function(i){
			return "radio"+(i+1);
		}
	}
})

固定的vue的数据问题不大，仍然可以通过之前的方法使用jq选中想要的元素。
但是大部分情况是在接口或者别的方法中传递的动态数据，用之前的方法就没办法选中了，模拟一下：


var vm = new Vue({
	el:"#main",
	data:{
		list1: [],
		list2: []
	},
	methods: {
		_checkbox: function(i){
			return "checkbox"+(i+1);
		},
		_radio: function(i){
			return "radio"+(i+1);
		}
	}
})
$(function(){
	vm.list1 = [
		{name : '111'},
		{name : '222'},
		{name : '333'},
	];
	vm.list2 = [
		{name : '111'},
		{name : '222'},
		{name : '333'},
	]
	
	$("input[type=radio]").eq(0).attr("checked","checked");			//这里使用jq就没办法选中了
	$("input[type=checkbox]").eq(0).attr("checked","checked");
})

vue中使用这种办法解决：

	<input v-for="(item,index) in list1" :value="item.name" type="radio" v-model="param" name="radio" />
	<input v-for="(item,index) in list2" :value="item.name" type="checkbox" v-model="param2" />