2012-01-11 59 views
1

我在我的HTML代碼:jQuery - 如何動態更改值?

<input class="hidd" type="radio" name="org1" value="1" /> 
<input class="hidd" type="radio" name="org1" value="2" /> 
<input class="hidd" type="radio" name="org1" value="3" /> 

<input type="hidden" id="crc" name="crc" value="20120109|0" /> 

欲jQuery的檢測哪個項目是由用戶選擇的,然後根據下式設定值: 如果與值「1」單選按鈕被用戶選擇,則id =「crc」的輸入值應該是:「20120109 | 1」而不是「20120109 | 0」。換句話說 - 在符號「|」之前保留所有數字並且只更改此符號「|」後面的值。我怎樣才能做到這一點?也許從id =「crc」取值,刪除最後一個數字並添加新數字?或者用另一種方式?

$('.hidd').click(function() { 

}); 
+4

究竟爲什麼你需要做到這一點?只需要兩個隱藏的'input'元素,'crc_date'和'crc_choice'。 – lonesomeday 2012-01-11 13:40:34

+1

並在你寫了'.click()'方法後,你停止嘗試? – meo 2012-01-11 13:41:11

+0

要選擇id ='「crc」'的元素,您可以使用'$('#crc')' – itdoesntwork 2012-01-11 13:42:25

回答

2

試試這個:

$('.hidd').click(function() { 
    var crc = $("#crc").val().split("|"); 
    $("#crc").val(crc[0] + "|" + $(this).val()); 
}); 

或者覆蓋選擇選項的所有可能的方法:

$('.hidd').change(function() { 
    var crc = $("#crc").val().split("|"); 
    $("#crc").val(crc[0] + "|" + $(this).val()); 
}); 
+0

只需注意一點:只有點擊元素時纔會觸發'click'除非被不同的腳本人爲地解僱),所以更好的想法是使用'change'而不是'click'。顧名思義,它會在值更改時被觸發,所以OP的要求(「_item被user_選中」)應該滿足,然後:) – Tadeck 2012-01-11 13:57:25

+0

@Tadeck謝謝,已更新。 – 2012-01-11 13:59:12

+0

我很高興我幫助:) – Tadeck 2012-01-11 14:04:23

0
$('.hidd').click(function() { 
    $("#crc").val('20120109|' + $(this).val()); 
}); 
1
$('.hidd').click(function() { 
    var v = $('#crc').val().split('|'); 
    $('#crc').val(v[0] + '|' + $(this).val()); 
}); 
+2

這隻會對點擊做出反應,因此以不同方式進行更改(例如,通過鍵盤或使用觸發功能的設備,可能不會觸發'click'事件)將不會觸發代碼OP的需要。 – Tadeck 2012-01-11 13:46:27

+0

是的,但它看起來好像隱藏了'class =「hidd」',所以沒有觸摸或鍵盤訪問。 – PiTheNumber 2012-01-11 13:48:33

+0

@PiTheNumber,包含結果的元素是隱藏的元素,而不是接收'click' /'change'事件的單選按鈕。 – 2012-01-11 13:53:17

1

使用jQuery的val()方法,字符串的split()方法你會得到一些事情摹狀:

var crc = $('#crc'); 
var radio = $(':radio[name="org1"]'); 
crc.val(crc.val().split('|')[0] + '|' + radio.val()); 

如果你想這時候的單選按鈕的值更改被觸發,然後執行以下操作(jQuery的1.7+):

$(':radio[name="org1"]').on('change', function(){ 
    var crc = $('#crc'); 
    crc.val(crc.val().split('|')[0] + '|' + $(this).val()); 
}); 
+0

在''|''部分(*在第二個示例*)後缺少'+'。 – 2012-01-11 13:55:21

+0

@ GabyakaG.Petrioli:感謝您的更正:)這是一個錯字。 – Tadeck 2012-01-11 13:58:42

0
$('.hidd').click(function() { 

    $('#crc').val('20120109|' + $(this).val()); 
}); 
1

這應該做它

$('.hidd').change(function() { 
    var crc = $('#crc'); 
    var value = crc.val(); 
    crc.val(value.split('|')[0] + '|' + this.value); 
}); 

演示在http://jsfiddle.net/gaby/cmCS9/


或正則表達式的方式

$('.hidd').change(function() { 
    var crc = $('#crc'); 
    var value = crc.val(); 
    crc.val(value.replace(/\d+$/, this.value)); 
}); 

演示在http://jsfiddle.net/gaby/cmCS9/1/

+0

「正則表達式的方法」很好,但如果他決定在第二部分中添加數字以外的東西,那麼這種方法將不起作用。 – 2012-01-11 13:58:05

-1
$('.hidd').change(function() { 
    var previousVal=$("input[type='hidden']").val(); 
    $("input[type='hidden']").val(previousVal+$(this).val()); 
}); 
+0

這將附加到現有的值,並可能以'20120109 | 0 | 1 | 2 | 3'結尾# – 2012-01-11 13:47:08

+0

Rory,你是老鷹的眼睛:) – 2012-01-11 13:49:16

+0

@RoryMcCrossan:至少它會在正確的時刻觸發,不僅當點擊;) – zizozu 2012-01-11 13:49:17

0
$('.hidd').click(function() { 
    if($(this).is(":checked")) { 
     $("#crc").val($("#crc").val().replace("/|[0-9]/","|" + $(this).val())); 
    } 
}); 
0

使用正則表達式

$('.hidd').click(function() { 
     var crc = $("#crc"), 
      $this = $(this); 
     if($this.is(":checked")) { 
      crc.val(crc.val().replace("/[0-9]$/", $this.val()); 
     } 
    } 
0

您可能想要考慮超越jQuery以達到JavaScript正則表達式的真棒威力: 「20120109 | 0」.match(「[0-9] * \ |」) 將返回「20120109 |」。

與jQuery和要求,一起把這個:

$('.hidd').change(function() { 
    var crc = $("#crc"), 
     old = crc.val(), 
     num = $(this).val(), 
     pfx = old.match("[0-9]*\\|"), 
     nvl = pfx + num; 
    crc.val(nvl); 
    // here you will want to return true or false 
});