checkbox的运用
<input type="checkbox" name="city" vlaue="徐州" />徐州
<br>
<input type="checkbox" name="city" vlaue="无锡" />无锡
<br>
<input type="checkbox" name="city" vlaue="姑苏" />姑苏
<br>
<input type="checkbox" name="Country" vlaue="中国" />中国
<br>
<input type="checkbox" name="Country" vlaue="俄罗斯" />俄罗斯
设置checkbox为单选
javascript部份
$(function(){
$(':checkbox[name=Country]').click(function(){
if($(this).prop('checked')){
$(':checkbox[name=Country]').prop("checked",false) ;
$(this).prop("checked",true);
}
});
})
如许通常设置name属性为Country的将变成单选,name为city的是多选。那末怎样取得被选中的元素呢?
取得checkbox选中的内容
javascript部份
$(function(){
var city = "";
$('input:checkbox[name=city ]:checked').each(function(){
city += ($(this).val());
});
})
这里须要注重的是;经由过程上面要领取得的内容是input标签的value值,假如没有给value值,取得的都是no
jquery作废选中
var code_Values = $('input:checkbox[name=abcd ]:checked');
if(code_Values.length){
for(var i=0;i<code_Values.length;i++)
{
code_Values[i].checked = false;
}
}else{
code_Values.checked = false;
}
radio的运用
下面是两组radio:
<input type="radio" checked="checked" name="sex_radio" id="man" value="man">男
<input type="radio" name="sex_radio" id="woman" value="woman">女
<input type="radio" checked="checked" name="chinese_radio" value="yes">是
<input type="radio" name="chinese_radio" value="no">否
运用JavaScript取得第一组被选中的谁人值
var radio = document.getElementsByName("sex_radio")
for(var i =0 ; i<radio.length;i++){
if(radio[i].checked){
console.log(radio[i].value)
}
}
运用juqery设置某选项被选中
$("#man").attr("checked","checked")
checked=”checked”属性是默许选中状况;
name属性相同为一组;
value是js取得的值;
select的运用
<select id="zh_select" >
<option value="HSK">HSK</option>
<option VALUE="TOCFL">TOCFL</option>
</select>
运用JavaScript取得选中值
$("#zh_select").change(function(){
var select = document.getElementById("zh_select");
console.log(select.options[select.selectedIndex].value);
})
运用JavaScript转变选中值
$("#zh_select").change(function(){
var select = document.getElementById("zh_select");
select.options[index].selected = true;
index:option的位置,从0最先。
})
$("#zh_select").find("option:contains('"+HSK+"')").attr("selected",true);