使用jQuery多选按钮，并获得按钮的属性值

这两天因为搞这个东西头发都快点完了，因为是初学者所以很多都需要翻文档导致做得很慢。今天终于做出来了发个博客记录一下。

效果图 

 HTML代码

<div id="stuName">
	<input type="button" class="btn btn-danger" value="小明01">
	<input type="button" class="btn btn-danger" value="小明02">
	<input type="button" class="btn btn-danger" value="小明03">
	<input type="button" class="btn btn-danger" value="小明04">
</div>
<div class="check">
	<button id="checkAll" type="button" class="btn btn-default">全都选</button>
	<button id="unCheckAll" type="button" class="btn btn-default">全不选</button>
	<button id="subBnt" type="button" class="btn btn-default">提交</button>
</div>

jQuery代码

$("document").ready(function(){
	//人名按钮变色
	// 获取stuName的所有子标签
	var inputs = $("#stuName").children("input");
	var values = new Array();
	$("#checkAll").click(function(){
		// 全选按钮变色
		$("#checkAll").addClass("btn-success");
		$("#unCheckAll").removeClass("btn-danger");
		// 全人名变色
		// var values = new Array();
		values = [];
		for (var i = 0; i < inputs.length; i++) {
			// console.log(inputs[i].value);
			// 获取属性的值并把值添加到values数组
			// values.push(inputs[i].value);
			//获取属性的值
			// inputs[i].getAttribute('class');
			$("#stuName input").removeClass("btn-danger");
			$("#stuName input").addClass("btn-success");
			values.push(inputs[i].value);
		}
		// console.log("全选:"+values);
	});
	$("#unCheckAll").click(function(){
		// 全不选按钮变色
		$("#unCheckAll").addClass("btn-danger");
		$("#checkAll").removeClass("btn-success");
		// 全人名变色
		for (var i = 0; i < inputs.length; i++) {
			$("#stuName input").removeClass("btn-success");
			$("#stuName input").addClass("btn-danger");
		}
		values = [];
		// console.log("全bu选:"+values);
	});
	//点击选中并变色
	$('#stuName input').click(function(){
		$(this).toggleClass("btn-danger");
		$(this).toggleClass("btn-success");
		$("#unCheckAll").removeClass("btn-danger");
	});
	// 点击提交储存人名 
	$("#subBnt").click(function(){
		values = [];
		for (var i = 0; i < inputs.length; i++) {
			var clas1 = inputs[i].getAttribute('class').slice(4);
			var clas2 = "btn-success";
			if (clas1 == clas2) {
				values.push(inputs[i].value);
			}
		}
		console.log("提交人名:"+values);
	});
});

至于css代码我就不发了，我的按钮css用的是bootstrap3的样式，如果需要的话可以点击v3.bootcss.com/css/#button…