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）復選框選中及下拉框選中指定項(刪除項)