最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

基于JavaScript实现复选框的全选和取消全选

来源:动视网 责编:小OO 时间:2020-11-27 20:25:18
文档

基于JavaScript实现复选框的全选和取消全选

本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考,具体内容如下:效果图。测试代码如下:<;<。DOCTYPE html>;<;html lang=";en";>;<;head>;<;meta charset=";UTF-8";>;<;title>;<;/title>;<;style>;li{list-style: none;} <;/style>;<;/head>;<;body>;<;p class=";first";>;<;ul class=";frtInfo";>;<;>。
推荐度:
导读本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考,具体内容如下:效果图。测试代码如下:<;<。DOCTYPE html>;<;html lang=";en";>;<;head>;<;meta charset=";UTF-8";>;<;title>;<;/title>;<;style>;li{list-style: none;} <;/style>;<;/head>;<;body>;<;p class=";first";>;<;ul class=";frtInfo";>;<;>。
 这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考,具体内容如下

效果图:

测试代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 li{list-style: none;}
 </style>
</head>
<body>
 <p class="first">
 <ul class="frtInfo">
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpa"/>液体</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpb"/>粉末</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpd"/>纯电池</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpe"/>危险品</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpd"/>配套电池</label>
 </li>
 <li class="same select">
 <label><input id="allChecked" class="allChk" type="button" name="sel" value="全选/取消" onclick="selectAllDels()"/></label>
 </li>
 </ul>
 </p>
 <script src="../js/jquery-1.11.3.js"></script>
 <script type="text/javascript">
 /*全选或取消全选*/
 function selectAllDels(){
 var allWp=document.getElementsByName("wp");
 var selOrUnsel=false;
 for(var i=0; i<allWp.length;i++){
 if(allWp[i].checked){
 selOrUnsel=true;
 break;
 }
 }
 if (selOrUnsel){
 allUnchk(allWp);
 }else{
 allchk(allWp);
 }
 }
 function allchk(allWp){
 for(var i=0; i<allWp.length;i++ ){
 allWp[i].checked=true;
 }
 }
 function allUnchk(allWp){
 for(var i=0; i<allWp.length;i++){
 allWp[i].checked=false;
 }
 }
 </script>
</body>
</html>

直接可用。

文档

基于JavaScript实现复选框的全选和取消全选

本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考,具体内容如下:效果图。测试代码如下:<;<。DOCTYPE html>;<;html lang=";en";>;<;head>;<;meta charset=";UTF-8";>;<;title>;<;/title>;<;style>;li{list-style: none;} <;/style>;<;/head>;<;body>;<;p class=";first";>;<;ul class=";frtInfo";>;<;>。
推荐度:
标签: 取消 全选 实现
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top