在進行web開發的時候會經常接觸到單選和多選,所以我覺得有必須對此進行一下總結:
用js進行判斷
複選框
//第幾個沒有選
<input type="checkbox" name="checkbox1" checked>
<input type="checkbox" name="checkbox1">
<input type="checkbox" name="checkbox1" checked>
<input type="checkbox" name="checkbox1">
<input type="checkbox" name="checkbox1">
<script language=javascript>
function check(obj)
{
for(i=0;i<document.all(obj).length;i++)
{
if(!document.all(obj)[i].checked)alert("第"+(i+1)+"個沒有選擇")
}
}
<input type=button οnclick="check('checkbox1')" value="檢測">
//一個也沒有選
<input type="checkbox" name="test">
<input type="checkbox" name="test">
<input type="checkbox" name="test">
<input type="checkbox" name="test">
<input type="checkbox" name="test">
<Script Language="JavaScript">
function check(obj){
for(i=0;i<document.all(obj).length;i++){
if(document.all(obj)(i).checked){
return;
}
}
window.alert('一個也沒有選!');
}
</Script>
<input type=button οnclick="check('test');" value="檢測">
//第幾個沒有選
<input type="checkbox" name="checkbox1" checked>
<input type="checkbox" name="checkbox1">
<input type="checkbox" name="checkbox1" checked>
<input type="checkbox" name="checkbox1">
<input type="checkbox" name="checkbox1">
<mce:script language=javascript><!--
function check(obj)
{
for(i=0;i<document.all(obj).length;i++)
{
if(!document.all(obj)[i].checked)alert("第"+(i+1)+"個沒有選擇")
}
}
<input type=button οnclick="check('checkbox1')" value="檢測">
//一個也沒有選
<input type="checkbox" name="test">
<input type="checkbox" name="test">
<input type="checkbox" name="test">
<input type="checkbox" name="test">
<input type="checkbox" name="test">
<Script Language="JavaScript">
function check(obj){
for(i=0;i<document.all(obj).length;i++){
if(document.all(obj)(i).checked){
return;
}
}
window.alert('一個也沒有選!');
}
</Script>
<input type=button οnclick="check('test');" value="檢測">
單選按鈕與複選框類似
在實際開發中有很多使用Jquery來進行操作的,當然使用jquery要方便的多,以下一段內容引自博客園
以下Jquery代碼適query1.4版本以上。
Radio
1.獲取選中值,三種方法都可以:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.設置第一個Radio爲選中值:
$('input:radio:first').attr('checked', 'checked');
或者
$('input:radio:first').attr('checked', 'true');
注: attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
3.設置最後一個Radio爲選中值:
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
4.根據索引值設置任意一個radio爲選中值:
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
5.根據Value值設置Radio爲選中值
$("input:radio[value='rd2']").attr('checked','true');
或者
$("input[value='rd2']").attr('checked','true');
6.刪除Value值爲rd2的Radio
$("input:radio[value='rd2']").remove();
7.刪除第幾個Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如刪除第3個Radio:$("input:radio").eq(2).remove();
8.遍歷Radio
$('input:radio').each(function(index,domEle){
//寫入代碼
});
DropDownList
1. 獲取選中項:
獲取選中項的Value值:
$('select#sel option:selected').val();
或者
$('select#sel').find('option:selected').val();
獲取選中項的Text值:
$('select#seloption:selected').text();
或者
$('select#sel').find('option:selected').text();
2. 獲取當前選中項的索引值:
$('select#sel').get(0).selectedIndex;
3. 獲取當前option的最大索引值:
$('select#sel option:last').attr("index")
4. 獲取DropdownList的長度:
$('select#sel')[0].options.length;
或者
$('select#sel').get(0).options.length;
5. 設置第一個option爲選中值:
$('select#sel option:first').attr('selected','true')
或者
$('select#sel')[0].selectedIndex = 0;
6. 設置最後一個option爲選中值:
$('select#sel option:last).attr('selected','true')
7. 根據索引值設置任意一個option爲選中值:
$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....
8. 設置Value=4 的option爲選中值:
$('select#sel').attr('value','4');
或者
$("select#sel option[value='4']").attr('selected', 'true');
9. 刪除Value=3的option:
$("select#sel option[value='3']").remove();
10.刪除第幾個option:
$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....
如刪除第3個Radio:
$(" select#sel option ").eq(2).remove();
11.刪除第一個option:
$(" select#sel option ").eq(0).remove();
或者
$("select#sel option:first").remove();
12. 刪除最後一個option:
$("select#sel option:last").remove();
13. 刪除dropdownlist:
$("select#sel").remove();
14.在select後面添加一個option:
$("select#sel").append("<option value='6'>f</option>");
15. 在select前面添加一個option:
$("select#sel").prepend("<option value='0'>0</option>");
16. 遍歷option:
$(' select#sel option ').each(function (index, domEle) {
//寫入代碼
});
CheckBox
1. 獲取單個checkbox選中項(三種寫法):
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2. 獲取多個checkbox選中項:
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3. 設置第一個checkbox 爲選中值:
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4. 設置最後一個checkbox爲選中值:
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5. 根據索引值設置任意一個checkbox爲選中值:
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
6. 選中多個checkbox:
同時選中第1個和第2個的checkbox:
$('input:radio').slice(0,2).attr('checked','true');
7. 根據Value值設置checkbox爲選中值:
$("input:checkbox[value='1']").attr('checked','true');
8. 刪除Value=1的checkbox:
$("input:checkbox[value='1']").remove();
9. 刪除第幾個checkbox:
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如刪除第3個checkbox:
$("input:checkbox").eq(2).remove();
10.遍歷checkbox:
$('input:checkbox’).each(function (index, domEle) {
//寫入代碼
});
11.全部選中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
12.全部取消選擇:
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});
也有使用struts標籤的,
<s:select name="assuUnit" id="assuUnit" list="#request.list" listKey="businessUnitCode" listValue="businessUnitName" headerKey="" headerValue="----請選擇業務單元----" οnchange="changeHidenValue();"></s:select>
<input type="hidden" id="assuUnitName" name="assuUnitName" value=""/>
當提交表單時,只能在後臺獲得listKey的值,而無法提交listValue的值。
現有需求同時提交listKey和listValue,解決方法如下:
1、在select的onchange事件函數中,獲得option中的text,即listValue。
2、這時,寫回到表單的一個隱藏域中。
可以用:
function changeHidenValue(){
var obj=document.getElementById('assuUnit');
var index=obj.selectedIndex; //序號,取當前選中選項的序號
var val = obj.options[index].text
if(document.getElementById('assuUnit').value!=''){
document.getElementById('assuUnitName').value=val;
}
}
來實現..
單選/多選/下拉框
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.