Heim > Web-Frontend > js-Tutorial > jquery 操作checkbox、radio、select 小结

jquery 操作checkbox、radio、select 小结

WBOY
Freigeben: 2016-06-01 09:54:50
Original
1372 Leute haben es durchsucht

jquery radio的操作:

<code class="language-html"><input type="radio" name="rd" checked id="rd1" value="rd1">
<input type="radio" name="rd" id="rd2" value="rd2">
<input type="radio" name="rd" id="rd3" value="rd3"></code>
Nach dem Login kopieren

1.获取选中值,三种方法都可以: 

<code class="language-javascript">$('input:radio:checked').val(); 
$("input[type='radio']:checked").val(); 
$("input[name='rd']:checked").val(); </code>
Nach dem Login kopieren


2.设置第一个Radio为选中值: 

<code class="language-javascript">$('input:radio:first').attr('checked', 'checked'); 
或者 
$('input:radio:first').attr('checked', 'true');</code>
Nach dem Login kopieren

注: attr("checked",'checked')= attr("checked", 'true')= attr("checked", true) 


3.设置最后一个Radio为选中值: 

<code class="language-javascript">$('input:radio:last').attr('checked', 'checked'); 
或者 
$('input:radio:last').attr('checked', 'true'); </code>
Nach dem Login kopieren
Nach dem Login kopieren


4.根据索引值设置任意一个radio为选中值: 

<code class="language-javascript">$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2.... 
或者 
$('input:radio').slice(1,2).attr('checked', 'true'); </code>
Nach dem Login kopieren


5.根据Value值设置Radio为选中值 

<code class="language-javascript">$("input:radio[value='rd2']").attr('checked','true'); 
或者 
$("input[value='rd2']").attr('checked','true'); </code>
Nach dem Login kopieren


6.删除Value值为rd2的Radio 

<code class="language-javascript">$("input:radio[value='rd2']").remove(); </code>
Nach dem Login kopieren


7.删除第几个Radio 

<code class="language-javascript">$("input:radio").eq(索引值).remove();索引值=0,1,2.... 
如删除第3个Radio:$("input:radio").eq(2).remove(); </code>
Nach dem Login kopieren


8.遍历Radio 

<code class="language-javascript">$('input:radio').each(function(index,domEle){ 
//写入代码 
}); </code>
Nach dem Login kopieren

 

jquery select的操作

<code class="language-html"><select id="sel">
    <option value="1" selected>a</option>
    <option value="2">b</option>
    <option value="3">c</option>
    <option value="4">d</option>
    <option value="5">e</option>
</select></code>
Nach dem Login kopieren

1. 获取选中项: 
获取选中项的Value值: 

<code class="language-javascript">$('select#sel option:selected').val(); 
或者 
$('select#sel').find('option:selected').val(); </code>
Nach dem Login kopieren

获取选中项的Text值: 

<code class="language-javascript">$('select#seloption:selected').text(); 
或者 
$('select#sel').find('option:selected').text();</code>
Nach dem Login kopieren

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

<code class="language-javascript">$('select#sel').get(0).selectedIndex; </code>
Nach dem Login kopieren


3. 获取当前option的最大索引值: 

<code class="language-javascript">$('select#sel option:last').attr("index") </code>
Nach dem Login kopieren


4. 获取DropdownList的长度: 

<code class="language-javascript">$('select#sel')[0].options.length; 
或者 
$('select#sel').get(0).options.length; </code>
Nach dem Login kopieren


5. 设置第一个option为选中值: 

<code class="language-javascript">$('select#sel option:first').attr('selected','true') 
或者 
$('select#sel')[0].selectedIndex = 0; </code>
Nach dem Login kopieren


6. 设置最后一个option为选中值: 

<code class="language-javascript">$('select#sel option:last).attr('selected','true') </code>
Nach dem Login kopieren


7. 根据索引值设置任意一个option为选中值: 

<code class="language-javascript">$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2.... </code>
Nach dem Login kopieren


8. 设置Value=4 的option为选中值: 

<code class="language-javascript">$('select#sel').attr('value','4'); 
或者 
$("select#sel option[value='4']").attr('selected', 'true'); </code>
Nach dem Login kopieren


9. 删除Value=3的option: 

<code class="language-javascript">$("select#sel option[value='3']").remove(); </code>
Nach dem Login kopieren


10.删除第几个option: 

<code class="language-javascript">$(" select#sel option ").eq(索引值).remove();索引值=0,1,2.... 
如删除第3个Radio: 
$(" select#sel option ").eq(2).remove(); </code>
Nach dem Login kopieren


11.删除第一个option: 

<code class="language-javascript">$(" select#sel option ").eq(0).remove(); 
或者 
$("select#sel option:first").remove();</code>
Nach dem Login kopieren

 
12. 删除最后一个option: 

<code class="language-javascript">$("select#sel option:last").remove(); </code>
Nach dem Login kopieren


13. 删除dropdownlist: 

<code class="language-javascript">$("select#sel").remove(); </code>
Nach dem Login kopieren


14.在select后面添加一个option: 

<code class="language-javascript">$("select#sel").append("<option value="6">f</option>");</code>
Nach dem Login kopieren

 
15. 在select前面添加一个option: 

<code class="language-javascript">$("select#sel").prepend("<option value="0">0</option>"); </code>
Nach dem Login kopieren


16. 遍历option: 

<code class="language-javascript">$(' select#sel option ').each(function (index, domEle) { 
//写入代码 
}); </code>
Nach dem Login kopieren

 

jquery checkbox的操作

<code class="language-html"><input type="checkbox" name="ck1" checked id="ck1" value="1">
<input type="checkbox" name="ck2" id="ck2" value="2">
<input type="checkbox" name="ck3" id="ck3" value="3">
<input type="checkbox" name="ck4" id="ck4" value="4"></code>
Nach dem Login kopieren

1. 获取单个checkbox选中项(三种写法): 

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


2. 获取多个checkbox选中项: 

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


3. 设置第一个checkbox 为选中值: 

<code class="language-javascript">$('input:checkbox:first').attr("checked",'checked'); 
或者 
$('input:checkbox').eq(0).attr("checked",'true'); </code>
Nach dem Login kopieren


4. 设置最后一个checkbox为选中值: 

<code class="language-javascript">$('input:radio:last').attr('checked', 'checked'); 
或者 
$('input:radio:last').attr('checked', 'true'); </code>
Nach dem Login kopieren
Nach dem Login kopieren


5. 根据索引值设置任意一个checkbox为选中值: 

<code class="language-javascript">$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2.... 
或者 
$('input:radio').slice(1,2).attr('checked', 'true');</code>
Nach dem Login kopieren

 
6. 选中多个checkbox: 
同时选中第1个和第2个的checkbox: 

<code class="language-javascript">$('input:radio').slice(0,2).attr('checked','true'); </code>
Nach dem Login kopieren


7. 根据Value值设置checkbox为选中值: 

<code class="language-javascript">$("input:checkbox[value='1']").attr('checked','true'); </code>
Nach dem Login kopieren


8. 删除Value=1的checkbox: 

<code class="language-javascript">$("input:checkbox[value='1']").remove(); </code>
Nach dem Login kopieren


9. 删除第几个checkbox: 

<code class="language-javascript">$("input:checkbox").eq(索引值).remove();索引值=0,1,2.... 
如删除第3个checkbox: 
$("input:checkbox").eq(2).remove(); </code>
Nach dem Login kopieren


10.遍历checkbox: 

<code class="language-javascript">$('input:checkbox').each(function (index, domEle) { 
//写入代码 
}); </code>
Nach dem Login kopieren


11.全部选中 

<code class="language-javascript">$('input:checkbox').each(function() { 
$(this).attr('checked', true); 
}); </code>
Nach dem Login kopieren


12.全部取消选择

<code class="language-javascript">$('input:checkbox').each(function () { 
$(this).attr('checked',false); 
});</code>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage