下拉框、单选按钮和多选框的值回显和取值

数据回显：


<!DOCTYPE>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<input type='radio' name='gender' value='women' />女
<input type='radio' name='gender' value='man' />男
<hr/>
<select id='city'>
<option value='bj'>北京</option>
<option value='sh'>上海</option>
<option value='gz'>广州</option>
</select>
<hr/>
<input type='checkbox' name='hobby' value='computer'/>玩电脑
<input type='checkbox' name='hobby' value='swimming'/>游泳
<input type='checkbox' name='hobby' value='phone'/>玩手机
<input type='checkbox' name='hobby' value='running'/>跑步
</body>
</html>

假设用户是个男人，住在广州，喜欢玩电脑、游泳，在该页面进行页面数据的回显

js：


var gender = document.getElementsByName('gender');
var city = document.getElementById('city');
var hobby = document.getElementsByName('hobby');
gender.forEach(function(item){
if(item.value == 'man'){
item.setAttribute('checked','true');return;
}
});
var opts = city.options;
for(let i=0;i<opts.length;i++){
if(opts[i].value == 'gz'){
opts[i].setAttribute('selected','true');break;
}
}
hobby.forEach(function(item){
if(item.value == 'computer' || item.value == 'swimming'){
item.setAttribute('checked','true');
}
});

jq：


$('input[name='gender']').find('option[value='man']').attr('checked','checked');
$('#city').find('option[value='gz']').attr('selected','selected');
$('input[name='hobby']').each(function(index){
if($(this).val() == 'computer' || $(this).val() == 'swimming'){
$(this).attr('checked','checked');
}
});

取值：


<!DOCTYPE>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<input type='radio' name='gender' value='women' checked='checked'/>女
<input type='radio' name='gender' value='man' />男
<hr/>
<select id='city'>
<option value='bj' select='selected'>北京</option>
<option value='sh'>上海</option>
<option value='gz'>广州</option>
</select>
<hr/>
<input type='checkbox' name='hobby' value='computer'/>玩电脑
<input type='checkbox' name='hobby' value='swimming'/>游泳
<input type='checkbox' name='hobby' value='phone'/>玩手机
<input type='checkbox' name='hobby' value='running' checked='checked'/>跑步
</body>
</html>

js:


var gender = document.getElementsByName('gender');
var genderValue,hobbyValue;
gender.forEach(function(item){
if(item.checked == true){
genderValue = item.value;
}
});
var city = document.getElementById('city');
var cityIndex = city.selectedIndex; // 选中索引
var cityText = city.options[cityIndex].text; // 选中文本
var cityValue = city.options[cityIndex].value; // 选中值
var hobby = document.getElementsByName('hobby');
hobby.forEach(function(item){
if(item.checked == true){
hobbyValue.push(item.value);
}
});

jq:


var radioVal = $('input[name='gender']:checked').val();
var selectVal = $('#city option:selected').val();
var selectText = $('#city option:selected').text();
var checkboxVal = [];
$('input[name='hobby']:checked').each(function(){
checkboxVal.push($(this).val());
});

判断checkbox或radio是否被选中：

一般用于阅读须知(checkbox)

js:


var readed = document.getElementById('readed');
var flag = readed.checked; //true or false

jq:

var flag = $('#readed').is(':checked');    //true or false

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。