js选择器

Demo1:

要求：前台页面一个form表单进行各项评分，要选择 所有打分的 input 并计算总分；

解决方案：给所有打分input一个公共class,遍历循环并相加，用总分减去结果并赋值；

　　js代码：

function Calcul(){ 
    var allScore=0;
    $(".score").each(function(){
        var value= parseInt($(this).val());
        if(isNaN(value)){
        }else{
            allScore += parseInt($(this).val());
        }    
    })
    $('#hsfen').val(100-allScore);
    $('#sumScore').val(100-allScore);
    $('#totalcount').val(100-allScore);
}; 

Demo2:

要求：前台表单里有复选和子单选，要求复选一旦被选中，默认选择子单选的第三个节点（按钮联动）；

　　　传到后台的值格式为 复选值_单选值 ；

　　   前台页面取到值要 解析 并选中；

1. 前台页面代码

<table id="table_map" class="table mt15" name="regionMap" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <th width="30%">辖区</th>
        <th>发送信息</th>
    </tr>
    <tr>
        <td width="30%"><input type="checkbox" class="city" value="全市" />全市</td>
        <td><input type="radio" class="ml20" name="m_1" value="1" />一级
        <input type="radio" class="ml20" name="m_1" value="2" />二级以上 
        <input type="radio" class="ml20" name="m_1" value="3" />三级以上</td>
    </tr>
    <tr>
        <td width="30%"><input type="checkbox" class="city" value="思明区" />思明区</td>
        <td><input type="radio" class="ml20" name="m_2" value="1" />一级
        <input type="radio" class="ml20" name="m_2" value="2" />二级以上 
        <input type="radio" class="ml20" name="m_2" value="3" />三级以上</td>
    </tr>
    <tr>
        <td width="30%"><input type="checkbox" class="city" value="海沧区" />海沧区</td>
        <td><input type="radio" class="ml20" name="m_3" value="1" />一级
        <input type="radio" class="ml20" name="m_3" value="2" />二级以上 
        <input type="radio" class="ml20" name="m_3" value="3" />三级以上</td>
    </tr>
</table>

　　2.按钮联动

//按钮联动
$('.city').click(function(e){
    if($(this).prop("checked")==true){
        $(this).parent().next().children().prop("disabled",false);
        $(this).parent().next().children().eq(2).prop("checked",true);    
    }else{
        $(this).parent().next().children().prop("checked",false);
        $(this).parent().next().children().prop("disabled",true);
    } 
});    

　　3.js代码(拼接字符串)

var str=""; 
$(".city:checked").each(function(){ 
    if(str==""){
        str+=$(this).val()+"_"+$(this).parent().next().children('[type="radio"]:checked').val();
    }else{
        str+=","+$(this).val()+"_"+$(this).parent().next().children('[type="radio"]:checked').val();
    } 
});        

　　4.js代码(拿到字符串 全市_1,思明区_2 分割匹配选中)

//区域
var regionMap = data[0].regionMap;
//alert(regionMap);
var strs = new Array();
if( regionMap.length > 0 ){
    strs = regionMap.toString().split(",");
    console.log(strs);
    if(strs.length>0){
        $.each(strs,function(i,record){
            var names= record.split('_');
            var cityName= names[0];
            var jibie=names[1];
            //console.log(cityName+"---"+jibie);
            var cityCheckbox=$("#table_map input[value='"+cityName+"']").prop("checked",true);
            cityCheckbox.parent().next().children("#table_map input[value='"+jibie+"']").prop("checked",true);
            cityCheckbox.parent().next().children().prop("disabled",false);
        })
    }
}