javascript - 选择单选按钮后隐藏和显示 div

Question

我有一个带有 cheque 和 cash 单选按钮的表单，check radio 是默认选中的。我还设置了，如果检查被选中而不是显示输入字段。如果选中现金，则隐藏输入字段。

我检查了检查元素，选择现金时事件有效，但选择现金时输入字段未隐藏。

我的问题已通过 Nisarg Shah 回答得到解决。现在我试图提交表格，但我得到了支票单选按钮的值(value)，但我没有得到现金的值(value)。获取错误Undefined index: mode_of_payment

if (isset($_POST['submit'])) {
    $status=$_POST['mode_of_payment'];
    echo $status;
}

你能帮我解决这个问题吗？

$('label.mode_of_payment').click(function(){
    $('input[type=radio]').attr('checked',null);
    $('label.mode_of_payment').removeClass("checked");
    $(this).prev().attr('checked',"checked");
    $(this).addClass("checked");
})
	$('#subject_section').change(function() {
    if ($('#display_cheque').attr('checked')) {
        $('#display_cheque_field').hide();
    } else {
        $('#display_cheque_field').show();
    }
});

		.radio-border{
			border:1px solid #000;
			width: 150px;
			border-radius: 30px;
			text-align: center;
			display: flex;

		}
		.radio-width-half{
			width: 75px;
		}
	input[type=radio]
    {
        display: none;
    }
    input[type=radio]:checked + label {
    background-color: #00a2ff;
    border-radius: 30px;
    display: block;
    color: #fff;
}
    .checked{
      background-color: #00a2ff;
      border-radius: 30px;
      display: block;
      color: #fff;
     }
     label.mode_of_payment {
    display: block;
    padding: 8px;
    transition: all 300ms ;
}
#display_cheque_field
{
	margin-top: 10px;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
							<div class="radio-border">
								<div class="radio-width-half">
									<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
									<label class="mode_of_payment">Cheque</label>
								</div>

								<div class="radio-width-half">
									<input type="radio" name="mode_of_payment" value="0" class="display-none">
									<label class="mode_of_payment">Cash</label>
								</div>
						</div><!--radio border-->
<div id="display_cheque_field">
						<input type="text" name="cheque_number" class="form-control"  id="cheque_number" placeholder="Cheque number">
						<input type="text" name="drawee_bank" class="form-control"  id="drawee_bank" placeholder="Bank">

</div>

<input type="submit" name="submit" value="submit">

</form>

Answer 1

您不能在整个表单上绑定(bind)到 change 事件，也不需要。由于您已经定义了一个点击事件来处理单选按钮的选中-取消选中，您可以隐藏/显示输入以及它们。您修改后的事件处理程序可能是这样的:

$('label.mode_of_payment').click(function() {
  $('input[type=radio]').prop('checked', false);
  $('label.mode_of_payment').removeClass("checked");
  $(this).prev().prop('checked', true);
  $(this).addClass("checked");

  if (!$('#display_cheque').prop('checked')) {
    $('#display_cheque_field').hide();
  } else {
    $('#display_cheque_field').show();
  }
})

$('label.mode_of_payment').click(function() {
  $('input[type=radio]').prop('checked', false);
  $('label.mode_of_payment').removeClass("checked");
  $(this).prev().prop('checked', true);
  $(this).addClass("checked");
  
  if (!$('#display_cheque').prop('checked')) {
    $('#display_cheque_field').hide();
  } else {
    $('#display_cheque_field').show();
  }
})

.radio-border {
  border: 1px solid #000;
  width: 150px;
  border-radius: 30px;
  text-align: center;
  display: flex;
}

.radio-width-half {
  width: 75px;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked+label {
  background-color: #00a2ff;
  border-radius: 30px;
  display: block;
  color: #fff;
}

.checked {
  background-color: #00a2ff;
  border-radius: 30px;
  display: block;
  color: #fff;
}

label.mode_of_payment {
  display: block;
  padding: 8px;
  transition: all 300ms;
}

#display_cheque_field {
  margin-top: 10px;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
  <div class="radio-border">
    <div class="radio-width-half">
      <input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
      <label class="mode_of_payment">Cheque</label>
    </div>

    <div class="radio-width-half">
      <input type="radio" name="mode_of_payment" value="0" class="display-none">
      <label class="mode_of_payment">Cash</label>
    </div>
  </div>
  <!--radio border-->
  <div id="display_cheque_field">
    <input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
    <input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">

  </div>

  <input type="submit" name="submit" value="submit">

</form>