如何在首字母后清除輸入值？

Question

我想使用jQuery在輸入值的第一個字母后面清除所有字符。我有這樣的：

<form id="form"> 
    <label><input type="checkbox" name="checkbox-one[]" value="A some text">A some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="B some text">B some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="C some text">C some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="D some text">D some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="Е some text">Е some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="F some text">F some text</label> 

    <input type="submit" value="submit"> 
</form> 

我想要的結果是這樣的：

<form id="form"> 
    <label><input type="checkbox" name="checkbox-one[]" value="A">A some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="B">B some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="C">C some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="D">D some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="Е">Е some text</label> 
    <label><input type="checkbox" name="checkbox-one[]" value="F">F some text</label> 

    <input type="submit" value="submit"> 
</form> 

我該怎麼辦呢？

Answer 1

您可以通過給val()僅返回當前值的第一個字符提供了一個功能做到這一點：

$('input[type="checkbox"]').val(function(i, v) { 
 
    return v[0]; 
 
}) 
 

 
// just to show it works: 
 
$('input[type="checkbox"]').each(function() { 
 
    console.log(this.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <label><input type="checkbox" name="checkbox-one[]" value="A some text">A some text</label> 
 
    <label><input type="checkbox" name="checkbox-one[]" value="B some text">B some text</label> 
 
    <label><input type="checkbox" name="checkbox-one[]" value="C some text">C some text</label> 
 
    <label><input type="checkbox" name="checkbox-one[]" value="D some text">D some text</label> 
 
    <label><input type="checkbox" name="checkbox-one[]" value="Е some text">Е some text</label> 
 
    <label><input type="checkbox" name="checkbox-one[]" value="F some text">F some text</label> 
 

 
    <input type="submit" value="submit"> 
 
</form>

不過，這將無疑是更好地做到這一點在你的填充表單源的代碼。這樣用戶就永遠不會看到這些值是什麼（假設這對你的邏輯很重要）。使用JS意味着他們仍然能夠看到最初在頁面源代碼中加載的值。

Answer 2

你可以嘗試這樣的

$("form").submit(function(event) { 
    $("input").each(function(){ 
    $(this).val($(this).val().charAt(0)) 
    }); 
}); 

Answer 3

你可以在提交之前改變數值：

$("#submitForm").click(function() { 

    $("#valueA").val($("#valueA").val().charAt(0)); 
    //continue for other values as well (b to f) 
    $("#form").submit(); 

}); 

你的形式將改爲：

<form id="form"> 
    <label><input type="checkbox" id="valueA" name="checkbox-one[]" value="A some text">A some text</label> 
    <label><input type="checkbox" id="valueB" name="checkbox-one[]" value="B some text">B some text</label> 
    <label><input type="checkbox" id="valueC" name="checkbox-one[]" value="C some text">C some text</label> 
    <label><input type="checkbox" id="valueD" name="checkbox-one[]" value="D some text">D some text</label> 
    <label><input type="checkbox" id="valueE" name="checkbox-one[]" value="Е some text">Е some text</label> 
    <label><input type="checkbox" id="valueF" name="checkbox-one[]" value="F some text">F some text</label> 

    <button id="submitForm">Submit</button> 
</form> 

它仍然可以當我看到其他用戶的答案時進行了優化。