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);