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

jquery form operation 2_jquery

WBOYOriginal: 2016-05-16 18:08:281246browse

Cascading effect of checkbox

Copy code The code is as follows:

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')

Statement：

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

Previous article：jQuery 1.5 source code interpretation for intermediate and advanced JSER_jqueryNext article：jQuery 1.5 source code interpretation for intermediate and advanced JSER_jquery

See more

jquery form operation 2_jquery

Related articles