选择单选按钮后隐藏并显示div

Question

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

我检查了检查元素，选择现金时事件正在工作，但选择现金时输入字段没有隐藏。

使用Nisarg Shah回答我的问题得到了解决。现在我尝试提交表单，但我得到了检查单选按钮的价值，但我没有得到现金的价值。得到错误Undefined index: mode_of_payment

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

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

＆＃13;

＆＃13;

$('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();
    }
});

＆＃13;

		.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您无法绑定整个表单上的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>

Answer 2

您可以使用以下代码。在这里，我在单选按钮div上添加了click事件，并在那里处理单选按钮更改功能

$(document).on('click', '.radio-width-half',function() {

	debugger;
      $("input[name=mode_of_payment]",this).prop("checked",true);
    //console.log("radio name = "+$("input[name=mode_of_payment]",this).attr('id'));

    if($('#display_cheque').is(":checked"))
	{
    	$('#display_cheque_field').show();
	}
	else{
		  $('#display_cheque_field').hide();
	}
});

.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://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.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" id="display_cash">
									<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 3

试试这个。我为自定义单元添加了这个css，不需要为此使用jQuery，还添加了jQuery for show和hide display_cheque_field。

.radio-width-half{ 
  position: relative;
}

input[type="radio"] {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

＆＃13;

＆＃13;

$("input[type=radio]").click(function () {
if($('#display_cheque')[0].checked) {
   $("#display_cheque_field").css('display' ,'block');
}
else{
   $("#display_cheque_field").css('display' ,'none');
}
});

＆＃13;

.radio-border{
  border:1px solid #000;
  width: 150px;
  border-radius: 30px;
  text-align: center;
  display: flex;
}
.radio-width-half{
  width: 75px;
  position: relative;
}
input[type="radio"] {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}
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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;