1. Use of html checkbox (value, assignment, and judgment whether to select)
1.1. Checkbox statement
<input type="" name="" value="" disabled="none" checked="checked" />
1.1.1. Declaring a checkbox mainly uses the above attributes
(1) type: represents the type of input, and the value of checkbox means that it is a multi-check box.
(2) name: Set the name that returns the checkbox, which means that if the options we selected can be submitted together through form, it must be declared as the name is the same.
(3) value: Set or return the value of the checkbox value property. When we submit the form form, the value represents the value of the checkbox we selected.
(4) checked: Set or return whether the checkbox is selected.
(5) disabled: Set or return whether checkbox should be disabled.
1.1.2. Declaring a checkbox mainly uses the above attributes
<input type="checkbox" name="ball" value="basketball" checked="checked"/>basketball <input type="checkbox" name="ball" value="football" />football <input type="checkbox" name="ball" value="volleyball" />volleyball <input type="checkbox" name="ball" value="badminton" />table tennis
Above we declare a multi-check box with name ball, where the first value is basketball. If we select it, the value value will be submitted to the server when submitting. We set the first checkbox to checked, and the first item is selected by default.
1.2. Checkbox declaration (two ways)
Click on text to realize the checkbox of click response.
1.2.1. The first type
Declare an id in each input directly, and then the following text is wrapped with the lable tag, and use the for attribute to point to the id in the input to achieve binding.
<form name="ballForm" > <input type="checkbox" name="ball" value="basketball" checked="checked"/><label for="1">basketball</label> <input type="checkbox" name="ball" value="football" /><label for="2">football</label> <input type="checkbox" name="ball" value="volleyball" /><label for="3">volleyball</label> <input type="checkbox" name="ball" value="badminton" /><label for="4">table tennis</label> </form>
1.2.2. The second type
Use the lable tag directly to nest input and text.
<label><input name="ball" type="checkbox" value="basketball" checked="checked"/>basketball</label> <label><input name="ball" type="checkbox" value="football" />football</label> <label><input name="ball" type="checkbox" value="volleyball" />volleyball</label> <label><input name="ball" type="checkbox" value="badminton" />table tennis</label>
1.3. How to get the value selected by checkbox (two methods)
1.3.1. The first type
Get it using JQuery
(1) We get the selected value of a single checkbox:
var checks = $("input[name = 'ball']:checked").val();
(2) Get the selected values of multiple checkboxes:
function jqueryFun(){
var arr = []; //Declare an array to store the checkbox value traversed $("input[name='ball']:checked").each(function(i){ //Travel ($(this).val()); //Push the value we traversed into the array // Finally, you can submit arr to submit the value of the checkbox we selected })
}
1.3.2. The second type
Use JavaScript to get
function test(){
// Get all checkbox elements var obj1 = ;
var arr = [];
for(i = 0; i< ; i++){
if(obj1[i].checked){
(obj1[i].value);
}
}
}
//Finally submit the arr we obtainedNote: When jQuery object takes value: (); when dom object takes value:;
1.4. Determine whether a checked is selected (two methods)
After JQuery 1.6 version, if the cancel check box is selected, we all use the prop method: the difference between prop and attr and the use
1.4.1. The first type
if ($("#checkbox-id").get(0).checked) {
// do something
}
if ($("#checkbox-id")[0].checked) {
// do something
}
1.4.2. The second type
if($('#checkbox-id').is(':checked')) {
// do something
}
1.4.3. The third type
if ($('#checkbox-id').prop('checked')) {
// do something
}
1.5. Set whether the check box is the selected code
$("input[name='ball']").prop("checked",true/false);
$("input[name='ball']").prop("checked",$("#1").prop('checked'));
1.6. Extra: Get the value of selecting radio
$("input:radio[name='']:checked").val();
1.7. Dynamically add checkbox Checkbox
First, using JS to dynamically generate Checkboxes can use similar statements:
var checkBox=("input");
("type","checkbox");
("id",'123456');
However, the checkbox generated in this way does not have the text after the tail. If you need to add it, you need to use it
('XXX')
Method to generate a text node and place it behind checkbox
With the following code, the program generates a checkbox and a text node, and puts them into a li object, and then adds the li object to the ul object:
var executerDiv=$("executerDiv");
="";
var ul=("ul");
for(var i=0;i<;i++){
var arr=tableDatas[i];
// Add to check boxvar checkBox=("input");
("type","checkbox");
("id",arr[0]);
("name", arr[1]);
var li=("li");
(checkBox);
((arr[1]));
(li);
}
(ul);
//by [url=//]//[/url]
In the above code, put checkbox in li and ul, which can achieve good arrangement effect. The CSS styles set by UL and li are as follows:
#executerDiv {
}
#executerDiv ul {
margin: 0px;
padding: 0px;
list-style-type: none;
vertical-align: middle;
}
#executerDiv li {
float: left;
display: block;
width: 100px;
height: 20px;
line-height: 20px;
font-size: 14px;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
background: #ffffff;
} Summarize
This is the article about checkbox usage (value, assignment, and judgment whether to select) in js. For more related content on using js checkbox, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!