Home > Web Front-end > JS Tutorial > jquery implements function codes such as checkbox selection, inverse selection, and no selection (odd number)_jquery

jquery implements function codes such as checkbox selection, inverse selection, and no selection (odd number)_jquery

WBOY
Release: 2016-05-16 17:48:55
Original
1224 people have browsed it

Assume that the page has the following set of check boxes and several related buttons (select all, inverse select, unselect all, etc.):

Copy code The code is as follows:

Apple
Orange
Banana
Grape






implement related functions respectively. The complete code is as follows:
Copy code The code is as follows:

$(function(){
$('#btn1').click(function(){//Select all
$("[name='fruit']").attr('checked','true');
} );
$('#btn2').click(function(){//Select none
$("[name='fruit']").removeAttr('checked');
});
$('#btn3').click(function(){//Inverse selection
$("[name='fruit']").each(function(){
if( $(this).attr('checked')){
$(this).removeAttr('checked');
}else{
$(this).attr('checked','true ');
}
})
});
$("#btn4").click(function(){//Select all odd numbers
$("[name=' fruit']:even").attr('checked','true');
})
$("#btn5").click(function(){//Get the values ​​of all selected options
var checkVal='';
$("[name='fruit'][checked]").each(function(){
checkVal =$(this).val() ',' ;
})
alert(checkVal);
})
});

Note that you must import the jquery package before using jquery!
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