最初の文字の後に入力値をクリアする方法は？

Question

jQueryを使用して、入力値の最初の文字の後にあるすべての文字をクリアします。

<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> 

は、私はそれをどのように操作を行うことができます。

<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> 

私は結果はこのようにしたい：私はこれを持っていますか？

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> 

を他のユーザーからの回答を見て最適化しました。