JQuery中，对CheckBox的操作分两个阶段，一个是JQuery1.6之前的版本，一个是1.6之后的版本

在1.6之前，我们这么做：

但是细心的同学会发现，在jQuery1.6之后，如果还像上面这么做，那肯定会出问题： $('#checkbox').attr('checked');获取到的值并不是true和false，而是checked或者undefined

那在1.6之后如何进行操作呢?

jQuery在之后的版本中对属性和特性进行了比较细致的区分，什么是特性呢？ 特性就是像 checked，selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected等等这些。

那prop()和attr()到底有什么区别呢？

于build-in属性，attribute和property共享数据，attribute更改了会对property造成影响，反之亦然，但是两者的自定义属性是独立的数据，即使name一样，也互不影响，看起来是下面这张图，但是IE6、7没有作区分，依然共享自定义属性数据

并不是所有的attribute与对应的property名字都一致，比如刚才使用的attribute 的class属性，使用property操作的时候应该是这样className t.className='active2';

对于值是true/false的property，类似于input的checked attribute等，attribute取得值是HTML文档字面量值，property是取得计算结果，property改变并不影响attribute字面量，但attribute改变会一向property计算 <input id="test3" type="checkbox"/>

对于一些和路径相关的属性，两者取得值也不尽相同，但是同样attribute取得是字面量，property取得是计算后的完整路径 <a id="test4" href="#">Click</a> js var

tml

<input type="checkbox" id="myCheckbox"/>

使用jQuery

//jQuery 1.6+
$('#myCheckbox').prop('checked')
//jQuery 1.5 以下
$('#myCheckbox').attr('checked')

原生JavaScript

document.getElementById("myCheckbox").checked

搭配使用jQuery 显示隐藏元素

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" id="myCheckbox" />
<div id="txt" style="display: none">头条新浪潮</div>
<script>
  $("#myCheckbox").click(function () {
    $("#txt").toggle(this.checked);
  });
</script>

使用原生JavaScript显示隐藏元素

<input type="checkbox" id="myCheckbox" />
<div id="txt" style="display: none">头条 新浪潮</div>
<script>
  const check = document.getElementById("myCheckbox");
  const txt = document.getElementById("txt");
  check.addEventListener("click", () => {
    txt.style.display = check.checked ? "unset" : "none";
  });
</script>

1）复选框选中及下拉框选中指定项(删除项)