Question

我正在使用JQuery构建表单，以在提交表单之前检查是否选中了单选按钮，并且遇到了一些问题。下面是我正在使用的代码。任何帮助，将不胜感激。

HTML（只是我的单选按钮）：

<!--Radio Button-->
    <div class="radio">
   	<label><input type="radio" id="myradio"> This is my radio button              
    </label>
    </div>

<!--Submit Button-->
<input value="sub" src="http://google.com"  type="image" id="button" name="sub"/>

jQuery：

我有3条规则要说明：

规则1）如果选中了“ myradio”单选按钮，并且“ name” =='John'，则提交表单。

规则2）其他如果未选中“ myradio”单选按钮，并且“ name” =='John'，则只需重新加载当前页面

规则3）否则提交表单。

我的第一个规则（规则1）似乎起作用了，但是规则2只是提交了表单，我不知道为什么它不起作用。

		$('#button').click(function () {
			var name = $.getQuery('name');

			if ($('#myradio').prop("checked") == true && name == 'John')       {
				$('#button').submit();	
			} 
			else if ($('#myradio').prop("checked") == false && name == 'John') {
				location.reload(true);
			} 
			else {
				$('button').submit();
			}
		});

Answer 1

// implement the "getQuery" for Stack Overflow
jQuery.getQuery = function () {
  return prompt("What should the name returned be?");
};

// dummy out the reload for Stack Overflow
var reload = function () {
  console.log('The window would have reloaded');
}

// catch the form submit
$('form').on('submit', function(e){
  e.preventDefault();
  console.log('The form would have submitted');
});

$('#button').on('click', function (e) {
  var name = $.getQuery('name');
  
  // #button is already going to submit the form
  // so we do not have to do any .submit() on it.
  // We do, however, want to cancel the form submit
  // if the condition is we just want to reload the page
  if ($('#myradio').prop('checked') == false && name == 'John') {
    // stop the form submit, as we are going to reload the page
    e.preventDefault();
    // reload the page
    reload(true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="radio">
    <label><input type="radio" id="myradio"> This is my radio button</label>
  </div>

  <input value="sub" src="http://google.com"  type="image" id="button" name="sub">
</form>

Answer 2

这对我有用。

$('#button').click(function () {
    var name = $('#name').val();

    if ($('#myradio').prop("checked") === true && name === 'John')       {
        $('#button').submit();	
    } 
    else if ($('#myradio').prop("checked") === false && name === 'John') {
        location.reload(true);
    } 
    else {
        $('button').submit();
    }
});

$body-color: blue;

body {
  color: $body-color;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>webpack starterkit</title>
  <script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
</head>
<body>
  <h1>webpack starter</h1>
  <p>✨ A lightweight foundation for your next webpack based frontend project.</p>
  <div><input type="text" id="name"/> </div>
  <!--Radio Button-->
  <div class="radio">
    <label><input type="radio" id="myradio"> This is my radio button              
   </label>
   </div>

<!--Submit Button-->
<input value="sub" src="http://google.com"  type="image" id="button" name="sub"/>
<script
  src="scripts/index.js"></script>
</body>
</html>

jQuery在提交表单之前检查单选按钮

2 个答案: