Home > Web Front-end > JS Tutorial > body text

jquery checkbox获取和设置选中值的一些操作

WBOY
Release: 2016-06-01 09:54:48
Original
1109 people have browsed it
<code class="language-html"><input type="checkbox" name="ck">php
<input type="checkbox" name="ck">mysql
<input type="checkbox" name="ck">jquery
<input type="checkbox" name="ck">java</code>
Copy after login

1. 获取单个checkbox选中项: 

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


2. 获取多个checkbox选中项: 

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


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

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


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

<code class="language-javascript">$('input:checkbox:last').attr('checked', 'checked'); 
或者 
$('input:checkbox:last').attr('checked', 'true');</code>
Copy after login

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

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


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

<code class="language-javascript">$('input:checkbox').slice(0,2).attr('checked','true'); </code>
Copy after login


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

<code class="language-javascript">$("input:checkbox[value='1']").attr('checked','true'); </code>
Copy after login


8. 删除Value=1的checkbox: 

<code class="language-javascript">$("input:checkbox[value='1']").remove(); </code>
Copy after login


9. 删除第几个checkbox: 

<code class="language-javascript">$("input:checkbox").eq(索引值).remove();索引值=0,1,2.... </code>
Copy after login

如删除第3个checkbox: 

<code class="language-javascript">$("input:checkbox").eq(2).remove(); </code>
Copy after login


10.遍历checkbox: 

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


11.checkbox全部选中 

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


12.checkbox全部取消选择: 

<code class="language-javascript">$('input:checkbox').each(function () { 
$(this).attr('checked',false); 
});</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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!