jquery笔记1

1,复制内容并给id重新命名
var $marquee_li_0 = $marquee_scroll.find('li').eq(0);
var $marquee_li_new = $marquee_li_0.clone(true).appendTo('.clone');
$marquee_li_0.after($marquee_li_new);
var $marquee_li_0_id=$marquee_li_0.find("span").attr("id");
var $marquee_li_new_id = $marquee_li_0_id+'_clone';
$marquee_li_new.find("span").attr("id",$marquee_li_new_id);
2,找出id以Marquee_x0开头的div下的所有以ratySpan为class的span集合
①js代码
$("div[id^='Marquee_x0'] span.ratySpan").each(function(index){
  var score = $(this).prev().html();//找出该span前面的元素
  $(this).raty({
    hints:['','','','',''],
    readOnly:true,
    halfShow:true,
    number:5,
    score:score
  });
});
②html代码
<div id="Marquee_x01">
 <ul>
  <li>
   <div class="ratyDiv" style="display:none;">11</div>
   <span class="ratySpan"></span>
  </li>
  <li>
   <div class="ratyDiv" style="display:none;">22</div>
   <span class="ratySpan"></span>
  </li>
 </ul>
</div>
<div id="Marquee_x02">
 <ul>
  <li>
   <div class="ratyDiv" style="display:none;">211</div>
   <span class="ratySpan"></span>
  </li>
  <li>
   <div class="ratyDiv" style="display:none;">222</div>
   <span class="ratySpan"></span>
  </li>
 </ul>
</div>
3,很好的清空功能 readonly属性的则不清空
$(':input','#formId')
       .not(':button,:submit,:reset,:hidden,[readonly]')
       .val('')
    .removeAttr('selected')
       .removeAttr('checked');
4,当键盘输出时触发其他
$(document).ready(function(){
 $("#a").change(function(){
   $("#b").val('test1');
 });
 $("#a").keyup(function(){
   $("#b").val('test1');
 });
});
5,截取字符串长度
function doSubStr(str,index){
     var resultStr;
     if(str!=''&&str!=null){
      var size = str.length;
      if(index<size){
       resultStr = str.substring(0,index);
      }
     }
     return resultStr;
}
6,checkbox与radio
①js代码
//在新增时,页面默认选择第一种规则[radio],并勾选第一种规则所需的数量[checkbox]
$("#formId input[name='rewardSwitchRule']").first().attr("checked",true);
fillFormRsr();
fillFormCk();
//当点击某规则时[radio],自动勾选匹配数量[checkbox]
$("#formId input[name='rewardSwitchRule']").click(function(){
 fillFormRsr();
 fillFormCk();
});
//当所有子复选框勾选后,自动勾选全选
var $ckId = $("input[name='ckId']");
$ckId.click(function(){
  $("#ckList").attr("checked",$ckId.length == $("input[name='ckId']:checked").length ? true : false);
  fillFormCk();
});

function fillFormRsr(){
 var rewardSwitchRule =$("#formId input[name='rewardSwitchRule']:checked").val();
 var rewardSwitch1 = $("#rewardSwitch1_"+rewardSwitchRule).val();
 //根据switch1数量选中个数
 $("#formId input[type='checkbox']").each(function(index){
  if(index<=rewardSwitch1){
   this.checked = true;
  }else{
   $("#ckList").attr("checked",false);
   this.checked = false;
  }
 });
}

function fillFormCk(){
  //选择的单数
 var ck_length = $("#formId input[name=ckId]:checked").length;
 $("#a").text(ck_length);
 //选择的金额
 var ck_fee=0;
 $("#formId input[name=ckId]:checked").each(function(index){
   var ckId = this.value;
   var ckFeeObj = $("#ckFee_"+ckId);
   if(ckFeeObj!=null){
    if(ckFeeObj.text()!=null && ckFeeObj.text()!=''){
     if(!isNaN(ckFeeObj.text())){
      ck_fee = ck_fee + parseInt(ckFeeObj.text());
     }
    }
      }
 });
 $("#b").text(ck_fee);
}

//表单全选
function tableCheckAll(formId){
  var checkbox = document.getElementById('ckList');
  if(checkbox.checked){
   $("#"+formId+" input[type='checkbox']").each(function(index){
    //遍历所有的checkBox,改变勾选状态,true表示勾上,false表示不勾
    this.checked = true;
   }); 
  } else {
   $("#"+formId+" input[type='checkbox']").each(function(index){
    this.checked = false;
   });  
  }
}
//校验form
function checkForm(){
 var ck_length=$("#a").text();
 var ck_fee=$("#b").text();
 var rewardSwitchRule=$("#formId input[name='rewardSwitchRule']:checked").val();
 var rewardSwitch1 = $("#rewardSwitch1_"+rewardSwitchRule).val();
 var rewardSwitch2 = $("#rewardSwitch2_"+rewardSwitchRule).val();
 $("#xx").val(ck_length);
 $("#yy").val(ck_fee);
 //判断是否符合范围
 if((parseFloat(ck_length)>=parseFloat(rewardSwitch1)) && (parseFloat(ck_fee)>=parseFloat(rewardSwitch2))){
  return true;
 }else{
  return false;
 }
}
//提交form
function submitForm(){
 var flag = checkForm();
 if(flag){
  $("#formId").submit();
 }
}
②html代码
<form id="formId" method="post">
 奖励规则: 
 <input id="rewardSwitchRule_9754" name="rewardSwitchRule"  value="1" type="radio"/>
 <input id="rewardSwitch1_1" name="rewardSwitch1"  value="100" type="hidden"/>
 <input id="rewardSwitch2_1" name="rewardSwitch2"  value="300000" type="hidden"/>
    100单×300000元
 <input id="rewardSwitchRule_9762" name="rewardSwitchRule"  value="2" type="radio"/>
 <input id="rewardSwitch1_2" name="rewardSwitch1"  value="10" type="hidden"/>
 <input id="rewardSwitch2_2" name="rewardSwitch2"  value="800000" type="hidden"/>
    10单×800000元
 <input id="rewardSwitchRule_9764" name="rewardSwitchRule"  value="3" type="radio"/>
 <input id="rewardSwitch1_3" name="rewardSwitch1"  value="5" type="hidden"/>
 <input id="rewardSwitch2_3" name="rewardSwitch2"  value="500000" type="hidden"/>
    5单×500000元
 <table class="table">
  <tr>
   <th ><input type='checkbox' id='ckList' name='ckList'  onclick='tableCheckAll("formId")'></th>
   <th>No.</th>
   <th>名称</th>
  </tr>
  <tr>
   <td class="center"><input id="ckId_9695" name="ckId" type="checkbox" value="9695"/></td>
   <td class="center">1</td>
   <td>aaaaa</td>
  </tr>
  <tr>
   <td class="center"><input id="ckId_9634" name="ckId" type="checkbox" value="9634"/></td>
   <td class="center">2</td>
   <td>bbbbb</td>
  </tr>
 </table>
 单数:<span id="a">0</span> 金额总额:<span id="b">0</span>
 <input type="hidden" id="xx" name="xx" value="0"/>
 <input type="hidden" id="yy" name="yy" value="0"/>
    <button onclick="submitForm();" class="btn" type="button">保存</button>
</form>
7,日期格式化
function formartDate(time) {
    var str=time+"";
    str=str.substring(0, str.indexOf(" 00"));
    return str;
}

 

你可能感兴趣的:(checkbox,jquery 全选 取消全选,强大清空,redio)