整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript-如何使用检查是否选中了复选框?

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>

jQuery 显示隐藏元素

使用原生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>

JavaScript显示隐藏元素

你的网站使用隐藏表单域,而你希望查看他们及其取值。要查找开发人员不希望被修改的参数,隐藏域是首选位置。

解决方案

在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将不起作用。