jquery操作checkbox示例分享,jquerycheckbox示例


checkbox操作

1. 全选、全不选

2.打印所有的选中项目

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> </title>
 <script type="text/javascript" src="jquery-1.3.2.js"></script>
 <script>
 // 全选、全不选
 function docChkBoxChange(){
  var isChecked = jQuery('#docChkBoxTop').attr('checked');
  // 设置以下所有的 checkBox 列表
  jQuery("input[name=docChkBox]").each(function(){
  this.checked = isChecked;
  });
 }//end function
 // 打印所有的选中项目
 function printChoose(){
  var isChecked = jQuery('#docChkBoxTop').attr('checked');
  // 设置以下所有的 checkBox 列表
  jQuery("input[name=docChkBox]").each(function(){
  if(this.checked){
  alert(this.value)
  }
  });
 }//end function
 </script>
 </head>

 <body>
 <table>
 <tr>
 <td>
  <input id='docChkBoxTop' type="checkbox" onClick='docChkBoxChange()'>全选、全不选
 </td>
 </tr>
 <tr>
 <td>
  <input name='docChkBox' type="checkbox" value='apple'>苹果
 </td>
 </tr>
 <tr>
 <td>
  <input name='docChkBox' type="checkbox" value='banana'>香蕉
 </td>
 </tr>
 
 <tr>
 <td>
  <input type="button" value='打印所有选中项' onClick='printChoose()'>
 </td>
 </tr>
 </table>
 </body>
</html>


jquery对checkbox的操作

你的思路是正确的
var tableA = ['aa', 'bb', 'cc', 'dd'], tableB = ['aa', 'cc'], i = 0, len = tableA.length;for(; i<len; i++){ var index = $.inArray(tableA[i], tableB); if(index !== -1){ // 此处为思路代码,在这里面选中对应checkbox即可 tableB[index].check = checked }}
 

【初学者】jquery操作checkbox的问题

你把checkbox放到li的里面,li的事件传递给了checkbox,点击checkbox的时候,其实是点击了li,所以布局有问题<!DOCTYPE html><html><head><meta charset=utf-8 /> <title>test</title> <script src="jquery1.8/jquery-1.8.0.min.js"></script> <script language="javascript" type="text/javascript"> jQuery(function(){ $('ul.classname li span').click(function() { var ck = $(this).prev(); ck.prop("checked", !ck.prop("checked"));}).hover( function () { $(this).css("cursor", "pointer");} ); });</script><body><ul class="classname"><li rel="1"><input name="keyword" type="checkbox" id="keyword" value="北京" /><span>北京</span></li><li rel="X"><input name="keyword" type="checkbox" id="keyword" value="XX" /><span>XX</span></li></ul></body></html>
 

评论关闭