复选框checkbox 判断是否选中及添加移除选中状态

最新推荐文章于 2024-05-22 17:04:38 发布

qq_41067386

最新推荐文章于 2024-05-22 17:04:38 发布

阅读量2.1k

点赞数

分类专栏： HTML javascript 文章标签：复选框复选框状态

本文链接：https://blog.csdn.net/qq_41067386/article/details/79225242

版权

HTML 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

 
    <!DOCTYPE html> 
  
    < 
   htmllang= 
   "en"> 
  
    < 
   head> 
  
    < 
   metacharset= 
   "UTF-8"> 
  
    < 
   metaname= 
   "viewport" 
   content= 
   "width=device-width, initial-scale=1.0"> 
  
    < 
   metahttp-equiv= 
   "X-UA-Compatible" 
   content= 
   "ie=edge"> 
  
    < 
   title>Document</ 
   title> 
  
    </ 
   head> 
  
    < 
   body> 
  
    < 
   input 
   type= 
   "checkbox" 
   id= 
   "checkbox"> 
  
    < 
   button 
   id= 
   "button">点我看是否选中</ 
   button> 
  
    < 
   br> 
  
    < 
   br> 
  
    < 
   input 
   type= 
   "checkbox" 
   id= 
   "checkbox2"> 
  
    < 
   button 
   id= 
   "button2">点我切换选中状态</ 
   button> 
  
    < 
   script 
   src= 
   "./jquery.min.js"></ 
   script> 
  
    < 
   script> 
  
   $( 
   '#button'). 
   click( 
   function () { 
  
   if ( 
   $( 
   '#checkbox'). 
   is( 
   ':checked')) { 
  
   console. 
   log( 
   '选中') 
  
    } 
   else { 
  
   console. 
   log( 
   '没有选中') 
  
    } 
  
    }) 
  
   // 第二种方法 
  
   $( 
   '#button'). 
   click( 
   function () { 
  
   if ( 
   $( 
   '#checkbox'). 
   prop( 
   'checked')) { 
  
   console. 
   log( 
   '选中prop') 
  
    } 
   else { 
  
   console. 
   log( 
   '没有选中prop') 
  
    } 
  
    }) 
  
   // jquery1.6 +: prop的4种赋值: 
  
   // $("#checkbox2cb1″).prop("checked",true); 
  
   // $("#checkbox2).prop({checked:true}); //map键值对 
  
   // $("#checkbox2).prop("checked",function(){ }) 
  
   // $("#checkbox2).prop("checked","checked"); 
  
   var onOff 
    = 
   true; 
  
   $( 
   '#button2'). 
   click( 
   function (){ 
  
   if (onOff) { 
  
   $( 
   "#checkbox2"). 
   prop( 
   "checked", 
   true); 
  
    } 
   else { 
  
   $( 
   "#checkbox2"). 
   prop( 
   "checked", 
   false); 
  
    } 
  
    onOff 
   = 
   !onOff; 
  
    }) 
  
    </ 
   script> 
  
    </ 
   body> 
  
    </ 
   html>