Question

我有一个复选框，希望它更改提交按钮的名称，但是没有。

这是相关代码

$( document ).ready(function()
    {
        $('input[name=checkbox_htmlName]').change(function() {
                if(this.checked) {
                        confirm("I am checked");
                        // $(this).prop("checked", returnVal);
                        //change from edit to delete
                        // document.getElementById(submit_btn_id).name = 'Delete Selected Item';
                        $('input[name=submit_htmlName]').val = 'Delete Selected Item';
                } else {
                    confirm("I am NOT checked");
                    // document.getElementById(submit_btn_id).name = 'Edit Selected Item';
                    $('input[name=submit_htmlName]').val = 'Edit Selected Item';
                }
        });
    });

按钮信息为

<input type="submit" name='submit_htmlName' id='submit_btn_id' class="btn btn-primary btn-block" value="change my name" alt="Edit Selected Item"/>

该代码在https://jsfiddle.net/mauricev/9py4vmco/1/处生效

Answer 1

val是jquery中的函数

https://api.jquery.com/val/

$('input[name=checkbox_htmlName]').change(function() {
  if (this.checked) {
    confirm("I am checked");
    $('input[name=submit_htmlName]').val('Delete Selected Item');
  } else {
    confirm("I am NOT checked");
    $('input[name=submit_htmlName]').val('Edit Selected Item');
  }
});

$('input[name=checkbox_htmlName]').change(function() {
  if (this.checked) {
    confirm("I am checked");
    $('input[name=submit_htmlName]').val('Delete Selected Item');
  } else {
    confirm("I am NOT checked");
    $('input[name=submit_htmlName]').val('Edit Selected Item');
  }
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="container">
  <form class="needs-validation" novalidate action="edit_gene_element.php" method="post">
    <div class="row">
      <div class="col-md-9 mb-3">
      </div>
      <div class="col-md-3 mb-3">
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="delete-checkbox" name='checkbox_htmlName' value='checkbox_htmlValue'>
          <label class="custom-control-label" for="delete-checkbox">Switch to delete mode</label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 mb-3">
      </div>
      <div class="col-md-3 mb-3">
        <input type="submit" name='submit_htmlName' id='submit_btn_id' class="btn btn-primary btn-block" value="change my name" alt="Edit Selected Item" />
      </div>
    </div>
  </form>
</div>

Answer 2

您可以使用以下任何一种方法来实现这一目标。

使用.val（）来设置每个匹配元素的值

jQuery( document ).ready(function($){
    $('input[name=checkbox_htmlName]').change(function() {
        if(this.checked) {
            $('input[name=submit_htmlName]').val('Delete Selected Item');
        } else {
            $('input[name=submit_htmlName]').val('Edit Selected Item');
        }
    });
});

使用.attr（）您可以将属性值修改为所需值

jQuery( document ).ready(function($){
    $('input[name=checkbox_htmlName]').change(function() {
        if(this.checked) {
            $('input[name=submit_htmlName]').attr('value','Delete Selected Item');
        } else {
            $('input[name=submit_htmlName]').attr('value','Edit Selected Item');
        }
    });
});

Answer 3

jQuery：您可以使用val()附加值，也可以使用attr：

$('input[name=submit_htmlName]').attr('value','Delete Selected Item')

$( document ).ready(function(){
        $('input[name=checkbox_htmlName]').change(function() {
                if(this.checked) {
                        confirm("I am checked");
                        // $(this).prop("checked", returnVal);
                        //change from edit to delete
                        // document.getElementById(submit_btn_id).name = 'Delete Selected Item';
                        $('input[name=submit_htmlName]').val('Delete Selected Item');
                } else {
                    confirm("I am NOT checked");
                    // document.getElementById(submit_btn_id).name = 'Edit Selected Item';
                    $('input[name=submit_htmlName]').val('Edit Selected Item');
                }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<input type="submit" name='submit_htmlName' id='submit_btn_id' class="btn btn-primary btn-block" value="change my name" alt="Edit Selected Item"/>
			 <input type="checkbox" class="custom-control-input" id="delete-checkbox" name='checkbox_htmlName' value='checkbox_htmlValue'>

Answer 4

您应该使用val()作为函数。

$('input[name=submit_htmlName]').val('Delete Selected Item');
$('input[name=submit_htmlName]').val('Edit Selected Item');

无法更改提交按钮的名称

4 个答案: