Home > Web Front-end > JS Tutorial > jquery 获取checkbox,radio,select被选中的值

jquery 获取checkbox,radio,select被选中的值

WBOY
Release: 2016-06-01 09:54:50
Original
1106 people have browsed it

jquery获取radio被选中的值:

<code class="language-html"><input type="radio" name="rd" id="rd1" value="1">1
<input type="radio" name="rd" id="rd2" value="2">2
<input type="radio" name="rd" id="rd3" value="3">3</code>
Copy after login

三种方法都可以:

<code class="language-javascript">$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();</code>
Copy after login

 

jquery获取select被选中的值:

<code class="language-html">  <select name="products" id="sel">
    <option value="1">option1</option>
    <option value="2" selected>option2</option>
    <option value="3">option3</option>
    <option value="4">option4</option>
  </select></code>
Copy after login

获取选中项的Value值:

<code class="language-javascript">$('select#sel option:selected').val();
或者
$('select#sel').find('option:selected').val();</code>
Copy after login

获取选中项的Text值:

<code class="language-javascript">$('select#seloption:selected').text();
或者
$('select#sel').find('option:selected').text();</code>
Copy after login

获取当前选中项的索引值:

<code class="language-javascript">$('select#sel').get(0).selectedIndex;</code>
Copy after login

 

jquery获取checkbox被选中的值:

<code class="language-html"><input type="checkbox" name="ck" value="checkbox1">checkbox1     
<input type="checkbox" name="ck" value="checkbox2" checked>checkbox2     
<input type="checkbox" name="ck" value="checkbox3">checkbox3      </code>
Copy after login

获取单个checkbox选中项: 

<code class="language-javascript">$("input:checkbox:checked").val() 
或者 
$("input:[type='checkbox']:checked").val(); 
或者 
$("input:[name='ck']:checked").val(); </code>
Copy after login


获取多个checkbox选中项: 

<code class="language-javascript">$('input:checkbox').each(function() { 
    if ($(this).attr('checked') ==true) { 
        alert($(this).val()); 
    } 
}); </code>
Copy after login

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template