準(zhǔn)備
1
.首先必須引入jquery這個js文件赌结。
<script type="text/javascript" src="__TMPL__/public/assets/js/jquery-1.7.2.min.js"></script>
2
.寫上input相關(guān)代碼
input代碼如下
<input type="text" class="corp_class" id="corp_id" name="corp_name" placeholder="請輸企業(yè)名稱" >
3
. 給input賦值计露、取值的代碼蔫敲。
<script>
$(document).ready(function () {
給input賦值、取值的代碼
});
</script>
開始
利用jquery的方式給類型為text的input賦值
方式一:根據(jù)input中的id給input賦值(#的形式)
$("#corp_id").val("我是企業(yè)名稱");
方式二:根據(jù)input中的name給input賦值(input[name='xxxx']的形式)
$("input[name='corp_name']").val('我是企業(yè)名稱');
方式三:根據(jù)input中的class給input賦值(點(diǎn)的形式)
$('.corp_class').val('我是企業(yè)名稱');
方式一驻谆、方式二卵凑、方式三-效果
利用jquery的方式取出類型為text的input中的值
input代碼如下
<input type="text" class="corp_class" id="corp_id" name="corp_name" placeholder="請輸企業(yè)名稱" >
方式一:根據(jù)input中的id取值(#的形式)
$("#corp_id").attr("value");
方式二:根據(jù)input中的name取值(input[name='xxxx']的形式)
$("input[name='corp_name']").val();
方式二:根據(jù)input中的class取值(input.xxxx的形式)
$("input.corp_class").val();
方式三:根據(jù)input中的name取值(:text[name="corp_name"]的形式)
$(':text[name="corp_name"]').val();
利用原生js的方式給類型為text的input賦值
方式一:根據(jù)input中的id賦值。getElementById的形式
document.getElementById("corp_id").value="我是企業(yè)名稱";
方式二:根據(jù)input中的name賦值胜臊。(必須分開寫勺卢,否則無法賦值)getElementsByName的形式
var input=document.getElementsByName("corp_name")[0];
input.value = "我是企業(yè)名稱";
方式三:根據(jù)input中的class賦值。getElementsByClassName的形式
document.getElementsByClassName("corp_class")[0].value="我是企業(yè)名稱";
利用原生js的方式取出類型為text的input中的值
方式一:根據(jù)input中的id取值象对。getElementById的形式
document.getElementById("corp_id").value;
方式二:根據(jù)input中的name取值值漫。getElementsByName的形式
document.getElementsByName("corp_name")[0].value;
方式三:根據(jù)input中的class取值。getElementsByClassName的形式
document.getElementsByClassName("corp_class")[0].value;
利用jquery的方式給類型為radio【單選功能】
的input賦值
input代碼如下
<div class="radio-wrap">
<input class="one_radio_class" type="radio" name="enterprisesType" id="one_radio_id" value="1">
<label for="one_radio_id">雙創(chuàng)載體</label>
</div>
<div class="radio-wrap">
<input class="two_radio_class" type="radio" name="enterprisesType" id="two_radio_id" value="2">
<label for="two_radio_id">金融機(jī)構(gòu)</label>
</div>
<div class="radio-wrap">
<input class="three_radio_class" type="radio" name="enterprisesType" id="three_radio_id" value="3">
<label for="three_radio_id">創(chuàng)業(yè)公司</label>
</div>
方式一:利用value為radio賦值织盼。
$("input[name='enterprisesType'][value=2]").attr("checked", true);
或者
$("input[value='2']").attr('checked','true');
方式二:利用slice為radio賦值杨何。(第一個數(shù)表示從第索引幾位開始截取沥邻;第二個數(shù)表示到幾位結(jié)束危虱,這個不是索引。從下標(biāo)為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剪勿,所以就會把當(dāng)前頁面的所有的radio考慮在內(nèi),找到索引為1的radio】
$('input:radio').eq(1).attr('checked', 'true');
方式一、方式二方庭、方式三厕吉、方式四酱固、方式五-效果
PS:不過一般都是用label嵌套input的方式實(shí)現(xiàn)單選,代碼大體如下:
<label><input type="radio" name="qyxx" value="國有">國有</label>
<label><input type="radio" name="qyxx" value="民營">民營</label>
<label><input type="radio" name="qyxx" value="外商投資企業(yè)">外商投資企業(yè)</label>
利用jquery的方式取出類型為radio的input中的值
方式一:利用type取出選中狀態(tài)下的radio對應(yīng)的value值
$("input[type='radio']:checked").val());
或者
$('input:radio:checked').val();
方式二:利用name取出選中狀態(tài)下的radio對應(yīng)的value值
$("input[name='enterprisesType']:checked").val();
方式三:利用class取出選中狀態(tài)下的radio對應(yīng)的value值
$("input[class='two_radio_class']:checked").val();
方式四:利用id取出選中狀態(tài)下的radio對應(yīng)的value值
$("input[id='two_radio_id']:checked").val();
方式五:利用id+filter+attr
取出選中狀態(tài)下的radio對應(yīng)的value值
$("#two_radio_id").filter(":checked").attr("value");
方式六:利用class+filter+attr
取出選中狀態(tài)下的radio對應(yīng)的value值
$("input:radio[='two_radio_class']").filter(":checked").attr("value"));
方式七:利用name+filter+attr
取出選中狀態(tài)下的radio對應(yīng)的value值
$("[name='enterprisesType']").filter(":checked").attr("value");
方式八【實(shí)用】
:利用on函數(shù)來實(shí)時監(jiān)聽單選按鈕的點(diǎn)擊头朱。點(diǎn)擊哪個單選按鈕运悲,哪個單選按鈕的value就會被打印出來
// 單選單選共用同一個name,所以用[name='enterprisesType']的方式项钮。
$("[name='enterprisesType']").on("change",
function (e) {
console.log($(e.target).val());
}
);
利用jquery的方式獲取單選按鈕的選中狀態(tài)下的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的方式獲取單選按鈕的選中狀態(tài)下的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的方式獲取單選按鈕的選中狀態(tài)下的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的方式移除選中狀態(tài)下的選中效果崖媚。
方式一:通過id+removeAttr
的方式移除選中狀態(tài)下的radio。
$("#two_radio_id").removeAttr("checked");
方式二:通過name+removeAttr
的方式移除選中狀態(tài)下的radio恤浪。
$("input:radio[name='enterprisesType']").removeAttr("checked");
方式三:通過class+removeAttr
的方式移除選中狀態(tài)下的radio畅哑。
$("input:radio[class='two_radio_class']").removeAttr("checked");
方式四:通過id+attr
的方式移除選中狀態(tài)下的radio。
$("#two_radio_id").attr("checked",false);
方式五:通過name+attr
的方式移除選中狀態(tài)下的radio水由。
$("input:radio[name='enterprisesType']").attr("checked",false);
方式六:通過class+attr
的方式移除選中狀態(tài)下的radio荠呐。
$("input:radio[='two_radio_class']").attr("checked",false);
注意要實(shí)現(xiàn)如上單選效果,type必須為radio砂客。name都必須保證一樣,如上name都為enterprisesType泥张。
利用jquery的方式給類型為checkbox【多選功能】
的input賦值
input代碼如下
<label><input type="checkbox" value="1" id="one_checkbox_id" class="one_checkbox_class"
name="checkbox_name[]">知識產(chǎn)權(quán)質(zhì)押</label>
<label><input type="checkbox" value="2" id="two_checkbox_id" class="two_checkbox_class"
name="checkbox_name[]">股權(quán)質(zhì)押</label>
<label><input type="checkbox" value="3" id="three_checkbox_id"
class="three_checkbox_class" name="checkbox_name[]">信用</label>
方式一:通過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
的方式鞠值。(第一個數(shù)表示從第索引幾位開始截让拇础;第二個數(shù)表示到幾位結(jié)束彤恶,這個不是索引钞钙。從下標(biāo)為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
遍歷取出所有選中狀態(tài)下的checkbox對應(yīng)的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的方式移除所有選中狀態(tài)下的checkbox選中效果唤锉。
方式一:通過name+attr
的方式移除素所有選中狀態(tài)下的checkbox世囊。
$("input:checkbox[name='checkbox_name[]']").attr("checked",false);
方式二:通過name+removeAttr
的方式移除所有選中狀態(tài)下的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
方法一:根據(jù)option中的value
株憾,選中下拉框的某個option
$("#select_id").find("option[value = '4']").attr("selected","selected");
// 讓value為4option選中蝙寨。
方法二:根據(jù)select中的id
,選中下拉框的某個option
$("#select_id")[0].selectedIndex = 4;
// 讓select下拉框索引為4的下標(biāo)值選中嗤瞎。
方法三:根據(jù)attr
墙歪,選中下拉框的某個option
$("#select_id").attr("value",'4');
利用原生js的方式讓select選中某個option
方法一:根據(jù)select中的id,選中下拉框的某個option贝奇。
document.getElementById("select_id")[4].selected=true;
// 讓select下拉框索引為4的下標(biāo)值選中虹菲。
利用jquery的方式實(shí)時監(jiān)聽選中option中的value值
方法一:利用on
函數(shù)實(shí)時監(jiān)聽選中option中的value值。
<select style="width:242px;" id="select_id" name="select_name" >
<option value="">-請選擇-</option>
<option value="1">電子信息</option>
<option value="2">汽車制造</option>
<option value="3">食品飲料</option>
<option value="4">裝備制造</option>
<option value="5">生物醫(yī)藥</option>
<option value="6">航空航天</option>
<option value="7">軌道交通</option>
<option value="8">節(jié)能環(huán)保</option>
<option value="9">新材料</option>
<option value="10">新能源</option>
<option value="11">人工智能</option>
<option value="12">精準(zhǔn)醫(yī)療</option>
<option value="13">虛擬現(xiàn)實(shí)</option>
<option value="14">傳感控制</option>
<option value="15">增材制造</option>
</select>
$('#select_id').on("change", function () {
console.log($(this).find(':selected').val());// 或者 console.log(this.value);
})
方法二:利用onchange
事件實(shí)時監(jiān)聽選中option中的value值掉瞳。
<select style="width:242px;" id="select_id" name="select_name" onchange="onchange_Value(this)">
xxx
xxx
xxx
</select>
<script type="text/javascript">
function onchange_Value(event){
var selectValue = $(event).find('option:selected').val();
console.log(selectValue);
}
</script>
方法三:利用oninput
事件實(shí)時監(jiān)聽選中option中的value值毕源。
<select style="width:242px;" id="select_id" name="select_name" oninput="oninput_Value(event)">
xxx
xxx
xxx
</select>
<script type="text/javascript">
function oninput_Value(obj){
var selectValue = $(obj).find('option:selected').val();
console.log(selectValue);
}
</script>
方法四:利用onpropertychange
事件,實(shí)時監(jiān)聽選中option中的value值陕习。.但是霎褐,我使用的是chrome瀏覽器,這個事件好像只有ie才有该镣。所以這里沒有測試過可行還不是不可行冻璃,代碼如下:
<select style="width:242px;" id="select_id" name="select_name" onpropertychange="onpropertychange_getSelectValue (event)">
xxx
xxx
</select>
<script type="text/javascript">
function onpropertychange_getSelectValue(event){
if (event.propertyName.toLowerCase () == "value") {
console.log(event.target.value);
}
</script>
利用jquery的方式額外增加option
- 新增畜牧養(yǎng)殖、水產(chǎn)培育
$("
<option value='16'>畜牧養(yǎng)殖</option>
<option vlaue='17'>水產(chǎn)培育</option>
").appendTo("#select_id");
利用jquery的方式清空option
$("#select_id").empty();
利用jquery的方式給label標(biāo)簽賦值
<label class="remind_class" id="remind_id" name="remind_name"></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標(biāo)簽賦值
方法一:利用id
給label賦值枣购。
document.getElementById('remind_id').innerHTML = '請正確輸入,例如:13600000000;
方法二:利用name
給label賦值擦耀。
document.getElementsByName("remind_name")[0].innerText ="請正確輸入棉圈,例如:13600000000";
利用jquery的方式取出label標(biāo)簽中的值
方法一:利用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標(biāo)簽中的值
方法一:利用id+text()
取出label的值吁系。
document.getElementById("remind_id").innerText;
方法二:利用name+text()
取出label的值德召。
document.getElementsByName("remind_name")[0].innerText
利用jquery的方式給p標(biāo)簽賦值
方法一:利用id+html()
給p標(biāo)簽賦值白魂。
$("#p_id").html("我是p標(biāo)簽");
方法二:利用id+text()
給p標(biāo)簽賦值。
$("#p_id").text("我是p標(biāo)簽");
方法三:利用class+html()
給p標(biāo)簽賦值上岗。
$(".p_class").html("我是p標(biāo)簽");
方法四:利用class+text()
給p標(biāo)簽賦值福荸。
$("#p_class").text("我是p標(biāo)簽");
方法一、方法二肴掷、方法三敬锐、方法四效果
利用原生js的方式給p標(biāo)簽賦值
方法一:利用id
給p標(biāo)簽賦值。
document.getElementById('p_id').innerHTML = '我是p標(biāo)簽';
方法二:利用name
給p標(biāo)簽賦值呆瞻。
document.getElementsByName("p_name")[0].innerHTML="我是p標(biāo)簽";
利用jquery的方式取出p標(biāo)簽里面的值
方法一:利用id+html()取出p標(biāo)簽的值台夺。
$("#p_id").html();
方法二:利用id+text()取出p標(biāo)簽的值。
$("#p_id").text());
方法三:利用class+html()取出p標(biāo)簽的值痴脾。
$(".p_class").html();
方法四:利用class+text()取出p標(biāo)簽的值颤介。
$(".p_class").text();
利用原生js的方式取出p標(biāo)簽中的值
方法一:利用id+text()
取出label的值。
document.getElementById("p_id").innerText;
方法二:利用name+text()
取出label的值赞赖。
document.getElementsByName("p_name")[0].innerText;
利用jquery的方式給button標(biāo)簽賦值
方法一:利用id+text()
給button標(biāo)簽賦值
$('#button_id').text('我是button標(biāo)簽');
方法二:利用id+html()
給button標(biāo)簽賦值
$("#button_id").html("我是button標(biāo)簽");
方法三:利用class+text()
給button標(biāo)簽賦值
$(".button_class").text("我是button標(biāo)簽");
方法四:利用class+html()
給button標(biāo)簽賦值
$(".button_class").html('我是button標(biāo)簽');
方法一滚朵、方法二、方法三薯定、方法四效果
利用原生js的方式給button標(biāo)簽賦值
方法一:利用id
給button標(biāo)簽賦值始绍。
document.getElementById('button_id').innerHTML = '我是button標(biāo)簽';
方法二:利用name
給button標(biāo)簽賦值。
document.getElementsByName("button_name")[0].innerHTML="我是button標(biāo)簽";
利用jquery的方式取出button標(biāo)簽里面的值
方法一:利用id+html()取出button標(biāo)簽的值话侄。
$("#button_id").html();
方法二:利用id+text()取出button標(biāo)簽的值亏推。
$("#button_id").text());
方法三:利用class+html()取出button標(biāo)簽的值。
$(".button_class").html();
方法四:利用class+text()取出button標(biāo)簽的值年堆。
$(".button_class").text();
利用原生js的方式取出button標(biāo)簽中的值
方法一:利用id+text()
取出button標(biāo)簽中的值吞杭。
document.getElementById("button_id").innerText;
方法二:利用name+text()
取出button標(biāo)簽中的值。
document.getElementsByName("button_name")[0].innerText;