首字母后如何清除输入值?

时间:2016-11-07 10:17:06

标签: jquery input

我希望使用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>

我该怎么做?

3 个答案:

答案 0 :(得分:3)

您可以通过向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意味着他们仍然能够看到最初在页面源中加载的值。

答案 1 :(得分:2)

您可以在提交前更改值:

$("#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>

当我看到其他用户的答案时,它仍然可以进行优化。

答案 2 :(得分:1)

您可以尝试这样

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