jquery form operation 2_jquery

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:

Option 1
Option 2
Option 3
Option 4
Option 5< ;/option>
Option 6
Option 7

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

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills