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>

題

你的網站使用隱藏表單域，而你希望查看他們及其取值。要查找開發人員不希望被修改的參數，隱藏域是首選位置。

解決方案

在WebScarab中，選擇Proxy選項卡，然后選擇該選項卡中的Miscellaneous窗格。選中標注著“Reveal hidden fields in HTML pages”的復選框，如圖3-10所示。現在，瀏覽到某個帶有隱藏表單域的網頁。它們將顯示為純文本的輸入框，如圖3-11所示。

討論

有些開發人員和測試人員烏節路“隱藏”表單域的本質。這些域在所呈現的頁面上是不可見的，但是在頁面被提交時卻提供了附加的數據。WebScarab會將這些隱藏表單域與其他所有內容一同獲取，因此它們根本沒用真正被隱藏。依賴用戶對這些隱藏值的無知是非常危險的。

當你在決定將哪些輸入作為邊界值測試和等價類劃分的候選對象時，你也應該將隱藏域包含進來。因為現在這些輸入是明文，沒有被隱藏，你的瀏覽器會允許你直接編輯這些輸入。只需單擊對應的框并開始輸入即可。不過，有些隱藏值時由網頁中的JavaScript計算得到的，因此你手動輸入的值有可能會在表單被提交之前被覆蓋。

搜索微信公眾號：TestingStudio霍格沃茲的干貨都很硬核

個單一的元素代碼示例:

//檢查CSS內容是否顯示:[none|block]，忽略可見性:[true|false]
$(element).is(":visible");

// 對隱藏的也是如此
$(element).is(":hidden");

使用jQuery的is()來檢查所選元素與另一個元素，選擇器或任何jQuery對象。

這個方法沿著DOM元素遍歷，以找到一個匹配的，滿足傳遞參數的元素。

如果有一個匹配，它將返回true，否則返回false。

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

上面的方法不考慮父級的可見性。要同時考慮父級，你應該使用.is(":hidden")或.is(":visible")。

比如說。

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

上述方法會認為div2是可見的，而:visible不是。但上述方法在很多情況下可能是有用的，特別是當你需要找到隱藏的父類中是否有任何錯誤的div是可見的，因為在這種情況下:visible將不起作用。