Home > Web Front-end > JS Tutorial > jquery form operation 2_jquery

jquery form operation 2_jquery

WBOY
Release: 2016-05-16 18:08:28
Original
1247 people have browsed it

Cascading effect of checkbox

Copy code The code is as follows:


What's your favorite sport?

Select all/unselect all

Football
Basketball
Badminton
Pongball

$('#CheckedAll').click(function(){
$('[name=items]:checkbox').attr(" checked", this.checked);
})

When the check box with the id "CheckedAll" is clicked, the check box group will be selected. When an option is unchecked, the check box with the ID "CheckedAll" is not unchecked.
To solve this problem:
Copy the code The code is as follows:

$('[ name=items]:checkbox').click(
function(){
var flag = true;
$('[name=items]:checkbox').each(function(){
if(!this.checked)
flag = false;
});
$('#CheckedAll').attr('checked', flag);
})
/ /Or you can use the total number of checkboxes equal to the number of selected checkboxes
$('[name=items]:checkbox').click(
function(){
var $tmp = $( '[name=items]:checkbox');
//Use the filter method to filter out the checkboxes and directly assign a value to CheckedAll
$('#CheckedAll').attr('checked', $tmp. length == $tmp.filter(':checked').length);
})

Application of drop-down box
Copy the code The code is as follows:




Select to add to the right
Add all to the right





Select to add to the left
Add all to the left


//Add the selected options to the other party
$('#add ').click(function(){
var $options = $('#select1 option:selected');//Get the selected option
$options.appendTo('#select2');//Append Give the other party
});
//Add all options to the other party
$('#add').click(function(){
var $options = $('#select1 option ');//Get the selected option
$options.appendTo('#select2');//Append to the other party
});
//Double-click an option to add it to the other party
$ ('#select1').dblclick(function(){
var $options = $('option:selected',this);//Get the selected option
$options.appendTo('#select2') ;//Append to the other party
})

PS: $('option:selected',this), $() has 2 parameters, one is the selector and the other is the scope . Equivalent to $('#select1 option:selected')
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