jquery operation radio button, check box, drop-down list implementation code_jquery

1. Check box selection operation: In fact, it is the use of Jquery selector. Click here to view the Jquery selector
html code:

Copy code The code is as follows:

Your favorite sport is:
football
basketball
badminton
pingpong

Jquey js script:

Copy code The code is as follows:

$('#checkAll'). click (checkAll); // Select all
$('#checkFootball').click (checkFootball); // Select only football
});
function checkAll()
{
$('input [type="checkbox"][name="item"]').attr ("checked", true);
// $('[name="item"]:checkbox'). attr("checked", true);
}

Note: To reverse the selection, just replace true here with false.
Select football operation
Jquey js script:

Copy code The code is as follows:

function checkFootball()
{
$(" [name='item']:checkbox").each(function () {
if (this.value == 'football')
{
this.checked = true;
}
})
}

Note: The specific purpose is to retrieve data from the background and display it. Here we do not use jQuery's attr() and val() methods to set the selection and get the value of the current checkbox. Instead, we use JavaScript's native Dom method, which is more effective than creating a jQuery object
2. Radio button operation
html code:

Copy code The code is as follows:

A B C D Which one do you choose:
A
B
C
D

Initialize selected letter B
Jquey js script:

Copy code The code is as follows:

$(document).ready(function() {
// Data initialization Select B.
$('[name="item"]:radio').each(function() {
if (this.value == 'B')
{
this. checked = true;
}
});
// Bind the event of getting the letter
$('#getLetter').click(getLetter);
});

Get the selected letters
Jquey js script:

Copy code The code is as follows:

function getLetter()
{
alert('The letter obtained is:' $('[name="item"][checked=true]:radio').val()) ;
}

3. Drop-down box (list) operation

Copy code The code is as follows :

Jquey js script:

Copy code The code is as follows:

$(document).ready(function() {
$('#addOptions').click(addOptions); // Add elements to the list
$('#getSelectedOption'). click(getSelectedOption); // Get the selected element
$('#clearOptions').click(clearOptions); // Clear the elements in the list
$('#addOptions').click(); / / Trigger the add element event to the list
});

Append element
Jquey js script:

Copy code The code is as follows:

function addOptions()
{
var selectContainer = $('#choose');
for (var i = 0 ; i < 5; i )
{
var option = $('').text('choose' i).val(i);
selectContainer .append(option);
}
}

Get the selected element

Copy code The code is as follows:

function getSelectedOption()
{
/* Pop each element one by one*/
var options = $('#choose > option: selected');
$.each(options, function () {
alert('option: ' this.value);
});
/* Pop each element one by one, first Abbreviation for species*/
$('#choose > option:selected').each(function() {
alert('option2: ' this.value);
});
// Pop up the data directly. If it is a drop-down box, pop up the data directly. If it is a list and multiple data are selected
// Data will be displayed separated by ','
alert('val: ' $('#choose').val());
}

Clear the list

Copy code The code is as follows:

function clearOptions()
{
$('#choose').empty();
}

Commonly used:

Copy code The code is as follows:

var ddl = $("# ddlDiaryType option:selected").text();//Drop-down list
var reb = $("#RbIfprivate [checked=true]:radio").val();//Radio button