jquery取值和賦值(包含部分是原生js的取值和賦值)

準(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賦值(點的形式)

$('.corp_class').val('我是企業(yè)名稱');

方式一、方式二、方式三-效果
image.png

利用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">金融機構(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>
image.png

方式一:利用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');

方式一、方式二、方式三、方式四、方式五-效果
image.png

PS:不過一般都是用label嵌套input的方式實現(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>
image.png

利用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");

方式八【實用】:利用on函數(shù)來實時監(jiā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);

注意要實現(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);

image.png

利用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的方式實時監(jiān)聽選中option中的value值

方法一:利用on函數(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)實</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事件實時監(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事件實時監(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事件,實時監(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");
image.png

利用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');

方法一、方法二、方法三、方法四效果

image.png

利用原生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)簽");

方法一、方法二、方法三、方法四效果

image.png

利用原生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)簽');

方法一、方法二、方法三、方法四效果

image.png

利用原生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;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,327評論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,996評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,316評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,406評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 72,128評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,524評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,576評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,759評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,310評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,065評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,249評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,821評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,479評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,909評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,140評論 1 290
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,984評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,228評論 2 375