原生JavaScripts/jQuery--爱好选择器

<form method="post" action="">
	你爱好的运动是？<input type="checkbox" id="checkedAllBox" />
	全选/全不选
	<br />
	<input type="checkbox" name="items" value="足球" />足球
	<input type="checkbox" name="items" value="篮球" />篮球
	<input type="checkbox" name="items" value="羽毛球" />羽毛球
	<input type="checkbox" name="items" value="乒乓球" />乒乓球
	<br />
	<input type="button" id="checkedAllBtn" value="全　选" />
	<input type="button" id="checkedNoBtn" value="全不选" />
	<input type="button" id="checkedRevBtn" value="反　选" />
	<input type="button" id="sendBtn" value="提　交" />
</form>

准备工作

-获取四个选项框 以及 全选/全不选多选框

- 原生javascript：

var checkedAllBox = document.getElementById(“checkedAllBox”);

var items=document.getElementsByName(“items”);

- jQuery

var $checkedAllBox = $(’#checkedAllBox’);

var $items = $(’:checkbox[name=items]’);

一.全选按钮

点击’全选’: 选中所有爱好

• 原生javascript

var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
   
	//遍历items  
	for (var i = 0; i < items.length; i++) {
   
		//通过多选框变种选中状态  
		items[i].checked = true;

	}
	//设置全选/全不选框
	checkedAllBox.checked = true;
}

• jQuery

$('#checkedAllBtn').click(function(){
   
    $items.prop('checked',true);
     //设置全选/全不选
    $checkedAllBox.prop('checked',true);
    
  }