freemaker页面复选框全选与反选

本文介绍了一个使用前端JavaScript进行表单验证的具体案例,包括如何通过选择器操作DOM元素,实现表单验证功能,并利用Chosen插件增强用户体验。此外还展示了如何通过全选/取消全选功能控制一组复选框。
             <tr>
                 <td align="right" style="width:120px">
                    <input type="checkbox" class="chk_list" id="checkall" checked="checked" value="" >
                    <td>全选/取消全选</td>
                 </td>
             </tr>
              <#if partnerFieldList?exists>
                  <#list partnerFieldList as partnerField>
                    <tr>
                   <td align="right" style="width:120px"><input type="checkbox" checked="checked" id="fieldNames" name="fieldNames" value="${partnerField.name}" /></td>
                   <td style="width:150px">
            ${partnerField.description}
               </td>
               <#if fieldTypeList?exists>
               <td style="width:150px">
                <select id="fieldType" name="fieldType" class="cword chosen">
                  <#list fieldTypeList as fieldType>
                                    <option value="${fieldType.id}">${fieldType.name}</option>
                                    </#list>
            </select>
               </td>
               </#if>
                    </tr>
                   </#list>
              </#if>

js实现:
  $(function(){
   $('#partnerFieldAddForm').Validform({
    btnSubmit:"#saveBtn",
    tiptype:2,
    showAllError:true,
    beforeSubmit: function(){
    var ids = "";
       var selectedCheckboxs =$("input:checked[name='fieldNames']");
       $.each(selectedCheckboxs, function(index, value){
          ids += $(value).val() +',';
        var value =  $(value).val()+'|'+$(value).parent().next().next().children().val();
        $(this).val(value);
       })
    ids = ids.substring(0, ids.length - 1);
             if (ids.length == 0) {
                $.jBox.tip('请先选择一行数据!');
                return false;
             }
    }
   });
   
   $("#checkall").click(
     function(){
     if(this.checked){
        $("input[name='fieldNames']").attr('checked', true)
     }else{
        $("input[name='fieldNames']").attr('checked', false)
         }
     }
     );
   
   
   $('.chosen').chosen({
    "no_results_text":'未找到匹配数据!',
    "width":"120px",
    "allow_single_deselect":true
   });
   $('#cancelBtn').click(function(){
    parent.jBox.close(true);
   });
  });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

csdn565973850

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值