准备
1.首先必须引入jquery这个js文件。
2.写上input相关代码
input代码如下
3. 给input赋值、取值的代码。
开始
利用jquery的方式给类型为text的input赋值
方式一：根据input中的id给input赋值(#的形式)
$("#corp_id").val("我是企业名称");
方式二：根据input中的name给input赋值(input[name='xxxx']的形式)
$("input[name='corp_name']").val('我是企业名称');
方式三：根据input中的class给input赋值(点的形式)
$('.corp_class').val('我是企业名称');
方式一、方式二、方式三-效果
利用jquery的方式取出类型为text的input中的值
input代码如下
方式一：根据input中的id取值(#的形式)
$("#corp_id").attr("value");
方式二：根据input中的name取值(input[name='xxxx']的形式)
$("input[name='corp_name']").val();
方式二：根据input中的class取值(input.xxxx的形式)
$("input.corp_class").val();
方式三：根据input中的name取值(:text[name="corp_name"]的形式)
$(':text[name="corp_name"]').val();
利用原生js的方式给类型为text的input赋值
方式一：根据input中的id赋值。getElementById的形式
document.getElementById("corp_id").value="我是企业名称";
方式二：根据input中的name赋值。(必须分开写，否则无法赋值)getElementsByName的形式
var input=document.getElementsByName("corp_name")[0];
input.value = "我是企业名称";
方式三：根据input中的class赋值。getElementsByClassName的形式
document.getElementsByClassName("corp_class")[0].value="我是企业名称";
利用原生js的方式取出类型为text的input中的值
方式一：根据input中的id取值。getElementById的形式
document.getElementById("corp_id").value;
方式二：根据input中的name取值。getElementsByName的形式
document.getElementsByName("corp_name")[0].value;
方式三：根据input中的class取值。getElementsByClassName的形式
document.getElementsByClassName("corp_class")[0].value;
利用jquery的方式给类型为radio【单选功能】的input赋值
input代码如下
方式一：利用value为radio赋值。
$("input[name='enterprisesType'][value=2]").attr("checked", true);
或者
$("input[value='2']").attr('checked','true');
方式二：利用slice为radio赋值。(第一个数表示从第索引几位开始截取；第二个数表示到几位结束，这个不是索引。从下标为1的索引截取，截取到第2位，也就是说只截取一位。所以会选中第二个radio)
$('input:radio').slice(1,2).attr('checked','true');
方式三：利用id为radio赋值。
$("#two_radio_id").attr("checked", "checked");
方式四：利用class为radio赋值。
$("input[class='two_radio_class']").attr("checked", true);
方式五：利用type+索引为radio赋值。【由于未指定哪个name，所以就会把当前页面的所有的radio考虑在内,找到索引为1的radio】
$('input:radio').eq(1).attr('checked', 'true');
方式一、方式二、方式三、方式四、方式五-效果
PS:不过一般都是用label嵌套input的方式实现单选，代码大体如下：
利用jquery的方式取出类型为radio的input中的值
方式一：利用type取出选中状态下的radio对应的value值
$("input[type='radio']:checked").val());
或者
$('input:radio:checked').val();
方式二：利用name取出选中状态下的radio对应的value值
$("input[name='enterprisesType']:checked").val();
方式三：利用class取出选中状态下的radio对应的value值
$("input[class='two_radio_class']:checked").val();
方式四：利用id取出选中状态下的radio对应的value值
$("input[id='two_radio_id']:checked").val();
方式五：利用id+filter+attr取出选中状态下的radio对应的value值
$("#two_radio_id").filter(":checked").attr("value");
方式六：利用class+filter+attr取出选中状态下的radio对应的value值
$("input:radio[='two_radio_class']").filter(":checked").attr("value"));
方式七：利用name+filter+attr取出选中状态下的radio对应的value值
$("[name='enterprisesType']").filter(":checked").attr("value");
方式八【实用】：利用on函数来实时监听单选按钮的点击。点击哪个单选按钮，哪个单选按钮的value就会被打印出来
// 单选单选共用同一个name，所以用[name='enterprisesType']的方式。
$("[name='enterprisesType']").on("change",
function (e) {
console.log($(e.target).val());
}
);
利用jquery的方式获取单选按钮的选中状态下的id【做法同下】
方式一：通过id+filter+attr的方式。
$("#two_radio_id").filter(":checked").attr("id");
方式二：通过name+filter+attr的方式。
$("[name='enterprisesType']").filter(":checked").attr("id");
方式三：通过class+filter+attr的方式。
$("input:radio[='two_radio_class']").filter(":checked").attr("id");
利用jquery的方式获取单选按钮的选中状态下的class【做法同上】
方式一：通过id+filter+attr的方式。
$("#two_radio_id").filter(":checked").attr("class");
方式二：通过name+filter+attr的方式。
$("[name='enterprisesType']").filter(":checked").attr("class");
方式三：通过class+filter+attr的方式。
$("input:radio[='two_radio_class']").filter(":checked").attr("class");
利用jquery的方式获取单选按钮的选中状态下的name【做法同上】
方式一：通过id+filter+attr的方式。
$("#two_radio_id").filter(":checked").attr("name");
方式二：通过name+filter+attr的方式。
$("[name='enterprisesType']").filter(":checked").attr("name");
方式三：通过class+filter+attr的方式。
$("input:radio[='two_radio_class']").filter(":checked").attr("name");
利用jquery的方式移除选中状态下的选中效果。
方式一：通过id+removeAttr的方式移除选中状态下的radio。
$("#two_radio_id").removeAttr("checked");
方式二：通过name+removeAttr的方式移除选中状态下的radio。
$("input:radio[name='enterprisesType']").removeAttr("checked");
方式三：通过class+removeAttr的方式移除选中状态下的radio。
$("input:radio[class='two_radio_class']").removeAttr("checked");
方式四：通过id+attr的方式移除选中状态下的radio。
$("#two_radio_id").attr("checked",false);
方式五：通过name+attr的方式移除选中状态下的radio。
$("input:radio[name='enterprisesType']").attr("checked",false);
方式六：通过class+attr的方式移除选中状态下的radio。
$("input:radio[='two_radio_class']").attr("checked",false);
注意要实现如上单选效果，type必须为radio。name都必须保证一样,如上name都为enterprisesType。
利用jquery的方式给类型为checkbox【多选功能】的input赋值
input代码如下
方式一：通过name+value+attr的方式。
$("input[name='checkbox_name[]'][value=2]").attr("checked", true);
$("input[name='checkbox_name[]'][value=3]").attr("checked", true);
全选是如下写法：
$("[name='checkbox_name[]']").attr("checked",'true');
方式二：通过slice+attr的方式。(第一个数表示从第索引几位开始截取；第二个数表示到几位结束，这个不是索引。从下标为1的索引截取，截取到第3位，也就是说截取两位。所以会选中第二个和第三个input:checkbox)
$('input:radio').slice(1,3).attr('checked','true');
方式三：通过eq+attr的方式。
$('input:checkbox').eq(1).attr('checked', 'true');
$('input:checkbox').eq(2).attr('checked', 'true');
或者
$("input[value='2']").attr('checked','true');
$("input[value='3']").attr('checked','true');
方式四：通过id+attr的方式。
$("#two_checkbox_id").attr("checked", "checked");
$("#three_checkbox_id").attr("checked", "checked");
方式五：通过value+attr的方式。
$("input:checkbox[value='2']").attr('checked','true');
$("input:checkbox[value='3']").attr('checked','true');
方式六：通过class+attr的方式。
$("input[class='two_checkbox_class']").attr("checked", true);
$("input[class='three_checkbox_class']").attr("checked", true);
利用jquery的方式取出类型为checkbox的input中所有选中的value值
方式一：利用each遍历取出所有选中状态下的checkbox对应的value值
var arrayObj = new Array();
$.each($('input:checkbox:checked'), function () {
arrayObj.push($(this).val());
});
console.log(arrayObj.join(","));
alert("选中了value值为" + arrayObj.join(",") +"的checbox。一共" +
$('input[type=checkbox]:checked').length +"个被选中");
或者
var arrayObj = new Array();
$.each($('input:checkbox'),function(){
if(this.checked){
arrayObj.push($(this).val());
}
});
console.log(arrayObj.join(","));
alert("选中了value值为" + arrayObj.join(",") +"的checkbox。一共" + $('input[type=checkbox]:checked').length +"个被选中");
利用jquery的方式移除所有选中状态下的checkbox选中效果。
方式一：通过name+attr的方式移除素所有选中状态下的checkbox。
$("input:checkbox[name='checkbox_name[]']").attr("checked",false);
方式二：通过name+removeAttr的方式移除所有选中状态下的checkbox。
$("input:checkbox[name='checkbox_name[]']").removeAttr("checked");
利用原生js的方式取出类型为checkbox的input中所有选中的值
var checkbox_name = document.getElementsByName('checkbox_name[]');
var checkStr = '';
for (var i = 0; i < checkbox_name.length; i++) {
if (checkbox_name[i].checked){
checkStr += checkbox_name[i].value + ',';
}
}
alert(checkStr == ''?'checkbox没有被选中':"选中了value值为" + checkStr +"的checkbox。一共" + $('input[type=checkbox]:checked').length +"个被选中");
利用jquery的方式让select选中某个option
方法一：根据option中的value，选中下拉框的某个option
$("#select_id").find("option[value = '4']").attr("selected","selected");// 让value为4option选中。
方法二：根据select中的id，选中下拉框的某个option
$("#select_id")[0].selectedIndex = 4;// 让select下拉框索引为4的下标值选中。
方法三：根据attr，选中下拉框的某个option
$("#select_id").attr("value",'4');
利用原生js的方式让select选中某个option
方法一：根据select中的id，选中下拉框的某个option。
document.getElementById("select_id")[4].selected=true;// 让select下拉框索引为4的下标值选中。
利用jquery的方式实时监听选中option中的value值
方法一：利用on函数实时监听选中option中的value值。
$('#select_id').on("change", function () {
console.log($(this).find(':selected').val());// 或者 console.log(this.value);
})
方法二:利用onchange事件实时监听选中option中的value值。
方法三:利用oninput事件实时监听选中option中的value值。
方法四：利用onpropertychange事件，实时监听选中option中的value值。.但是，我使用的是chrome浏览器，这个事件好像只有ie才有。所以这里没有测试过可行还不是不可行，代码如下：
利用jquery的方式额外增加option
- 新增畜牧养殖、水产培育
$("
").appendTo("#select_id");
利用jquery的方式清空option
$("#select_id").empty();
利用jquery的方式给label标签赋值
方法一：利用id+text()给label赋值
$('#remind_id').text('请正确输入，例如：13600000000');
方法二：利用id+html()给label赋值
$('#remind_id').html('请正确输入，例如：13600000000');
方法三：利用class+text()给label赋值
$(".remind_class").text("请正确输入，例如：13600000000");
方法四：利用class+text()给label赋值
$(".remind_class").html('请正确输入，例如：13600000000');
方法一、方法二、方法三、方法四效果
利用原生js的方式给label标签赋值
方法一：利用id给label赋值。
document.getElementById('remind_id').innerHTML = '请正确输入，例如：13600000000;
方法二：利用name给label赋值。
document.getElementsByName("remind_name")[0].innerText ="请正确输入，例如：13600000000";
利用jquery的方式取出label标签中的值
方法一：利用id+html()取出label的值。
$("#remind_id").html();
方法二：利用id+text()取出label的值。
$("#remind_id").text();
方法三：利用class+html()取出label的值。
$(".remind_class").html();
方法四：利用class+text()取出label的值。
$(".remind_class").text();
利用原生js的方式取出label标签中的值
方法一：利用id+text()取出label的值。
document.getElementById("remind_id").innerText;
方法二：利用name+text()取出label的值。
document.getElementsByName("remind_name")[0].innerText
利用jquery的方式给p标签赋值
方法一：利用id+html()给p标签赋值。
$("#p_id").html("我是p标签");
方法二：利用id+text()给p标签赋值。
$("#p_id").text("我是p标签");
方法三：利用class+html()给p标签赋值。
$(".p_class").html("我是p标签");
方法四：利用class+text()给p标签赋值。
$("#p_class").text("我是p标签");
方法一、方法二、方法三、方法四效果
利用原生js的方式给p标签赋值
方法一：利用id给p标签赋值。
document.getElementById('p_id').innerHTML = '我是p标签';
方法二：利用name给p标签赋值。
document.getElementsByName("p_name")[0].innerHTML="我是p标签";
利用jquery的方式取出p标签里面的值
方法一：利用id+html()取出p标签的值。
$("#p_id").html();
方法二：利用id+text()取出p标签的值。
$("#p_id").text());
方法三：利用class+html()取出p标签的值。
$(".p_class").html();
方法四：利用class+text()取出p标签的值。
$(".p_class").text();
利用原生js的方式取出p标签中的值
方法一：利用id+text()取出label的值。
document.getElementById("p_id").innerText;
方法二：利用name+text()取出label的值。
document.getElementsByName("p_name")[0].innerText;
利用jquery的方式给button标签赋值
方法一：利用id+text()给button标签赋值
$('#button_id').text('我是button标签');
方法二：利用id+html()给button标签赋值
$("#button_id").html("我是button标签");
方法三：利用class+text()给button标签赋值
$(".button_class").text("我是button标签");
方法四：利用class+html()给button标签赋值
$(".button_class").html('我是button标签');
方法一、方法二、方法三、方法四效果
image.png
利用原生js的方式给button标签赋值
方法一：利用id给button标签赋值。
document.getElementById('button_id').innerHTML = '我是button标签';
方法二：利用name给button标签赋值。
document.getElementsByName("button_name")[0].innerHTML="我是button标签";
利用jquery的方式取出button标签里面的值
方法一：利用id+html()取出button标签的值。
$("#button_id").html();
方法二：利用id+text()取出button标签的值。
$("#button_id").text());
方法三：利用class+html()取出button标签的值。
$(".button_class").html();
方法四：利用class+text()取出button标签的值。
$(".button_class").text();
利用原生js的方式取出button标签中的值
方法一：利用id+text()取出button标签中的值。
document.getElementById("button_id").innerText;
方法二：利用name+text()取出button标签中的值。
document.getElementsByName("button_name")[0].innerText;