JavaScript獲取radio選中值

<ww:iterator value="proceList" status="rowstatus" id="it"><tr style="cursor: pointer;"><td class="Page_TableLabel_Center" ><input type="radio" id="cuibanradio" name="cuibanradio" value='<ww:property value="workItemId"></ww:property>'/></td></tr> </ww:iterator>

要獲取被選中的radio的值：

1、

var workItemId = document.getElementById("cuibanradio").value;

這種方法獲得的workItemId 永遠都是列表第一行的workItemId 值（不管選中的radio是第幾行）；

2、正確獲取被選中的radio的方法：

var workItemId;var radio = document.getElementsByName("cuibanradio");for(var i = 0; i < radio.length;i++){if(radio[i].checked){workItemId = radio[i].value;break;}}

這里，我們就要總結一下getElementById和getElementsByName的區別了。我們先看下面這個例子：

javascript在取得radio被選中的值時一般使用遍歷的方法,判斷每個Radio是否被選中,如果是,再取其值.

<formid="userlist"method="post"action="option"><input type="radio" name="userid" value="1">1<input type="radio" name="userid" value="2">2<input type="radio" name="userid" value="3">3 </form> <script language="javascript">function usubmit(action){var radionum = document.getElementById("userlist").userid;for(var i=0;i<radionum.length;i++){if(radionum[i].checked){userid = radionum[i].value}}window.location.href='option.action?action='+action+'&userid='+userid;} </script>

這里有兩個要注意的地方：一個是如何取值，一個是如何遍歷。

document.getElementById(“userlist”).userid;
這是根據form的id再取其中控件元素的name取值的方法。也可以用document.getElementsByName(“userid”)直接獲得

getElementById與getElementsByName的區別，getElementById取radio類型元素只能選取單個控件，getElementsByName取radio類型元素的時候是取出的整個radio數組,如果一定要用getElementById，則可像上面代碼一樣先用getElementById取得整個表單的id.后面緊跟radio名稱即可 。

現在知道document.getElementsByName(“userid”)就是得到一個數組，該數組中的元素是該dom樹中所有name為radionum的元素，即使只有一個radio，也是一個只包含一個元素的數組。而document.all.userid則不同，它是得到頁面中的userid元素的引用，當頁面中存在多個radio時，它返回的是一個數組，如果頁面中只包含一個radio，則得到的就是這個radio對象的引用．由于這時得到的不是一個數組，因此就不能遍歷數組來進行判斷了．如下面這個方法：

<script>function getRadioBoxValue(radioName){var obj = document.getElementsByName(radioName); //這個是以標簽的name來取控件for(i=0; i<obj.length;i++) {if(obj[i].checked) {return obj[i].value;}} return "undefined"; } </script>

jQuery獲取radio選中值：

<input type="radio" name="radio" id= "radio1" value ="radio1" checked="checked" /> <input type="radio" name="radio" id= "radio2" value="radio2" /> <input type="radio" name="radio" id= "radio3" value="radio3" />

獲取方法：

1.獲取選中值，三種方法都可以： $('input:radio:checked').val()； $("input[type='radio']:checked").val(); $("input[name='radio']: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=http://www.2cto.com/kf/201110/'radio2']").attr('checked','true'); 或者 $("input[value=http://www.2cto.com/kf/201110/'radio2 ']").attr('checked','true'); 6.刪除Value值為rd2的Radio $("input:radio[value=http://www.2cto.com/kf/201110/'radio2 ']").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){//寫入代碼 });

jQuery如何獲取下拉框的選中值：

<select id= "multiSelect"><option value="1" selected= "selected">one</option ><option value="2" >two</ option><option value="3" >three</ option><option value="4" >four</ option><option value="5" >five</ option> </select> 1. 獲取選中項： 獲取選中項的Value值：$('select#multiSelect option:selected').val();或者$('select#multiSelect ').find('option:selected').val(); 獲取選中項的Text值：$('select#multiSelect option:selected').text();或者$('select#multiSelect ').find('option:selected').text(); 2. 獲取當前選中項的索引值： $('select#multiSelect ').get(0).selectedIndex; 3. 獲取當前option的最大索引值： $('select#multiSelect option:last').attr("index") 4. 獲取集合的長度： $('select#multiSelect ')[0].options.length; 或者 $('select#multiSelect ').get(0).options.length; 5. 設置第一個option為選中值： $('select#multiSelect option:first').attr('selected','true') 或者$('select#multiSelect ')[0].selectedIndex = 0; 6. 設置最后一個option為選中值： $('select#multiSelect option:last').attr('selected','true')

總結

以上是生活随笔為你收集整理的JavaScript jQuery获取radio/下拉框的选中值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。