选中单选按钮时无法隐藏/显示文本框

Question

这是我的html代码&jquery，我想隐藏no。bpjs bpjs无线电检查时文本框。我不认为我的代码是错的，但我不知道为什么我的代码不工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="form-group row">
<label class="col-form-label col-sm-2 pt-0">Pengobatan</label>
<div class="col-sm-10">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="umum" onclick="w3.show('#nomor_bpjs')" name="pengobatan" class="minimal" value="Umum" value="<?= set_value('pengobatan') ?>">
<label class="detail" for="umum">Umum</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="bpjs" onclick="w3.hide('#nomor_bpjs')" name="pengobatan" class="minimal" value="BPJS" value="<?= set_value('pengobatan') ?>">
<label class="detail" for="bpjs">BPJS</label>
</div>
</div>
</div>
<div class="form-group row" id="no_bpjs">
<label for="no_bpjs" class="col-sm-2 col-form-label">No. BPJS </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nobpjs" name="nobpjs" placeholder="Masukan Nomor BPJS" value="<?= set_value('no_bpjs') ?>">
</div>
</div>

和jquery

<script>
$(function() {
$('.nobpjs').hide();
//show it when the checkbox is clicked
$('input[id="bpjs"]').on('click', function() {
if ($(this).prop('checked')) {
//show div with class="nama"
$('.nobpjs').fadeIn();
} else if ($('input[id="umum"]').on('click')) {
//hide div with class= "nama"
$('.nobpjs').hide();
} else {
$('.nobpjs').hide();
}
});
});
</script>

我想隐藏no。选中BPJS单选时的BPJS文本框

Answer 1

您的错误是将元素调用为类而不是作为id．在jQuery中，使用$('#idName')调用元素id，使用$('.className')调用类。

我在下面的代码中修复了这些错误，我还从复选框中删除了onclick属性。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="form-group row">
<label class="col-form-label col-sm-2 pt-0">Pengobatan</label>
<div class="col-sm-10">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="umum" name="pengobatan" class="minimal" value="Umum" value="<?= set_value('pengobatan') ?>">
<label class="detail" for="umum">Umum</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="bpjs" name="pengobatan" class="minimal" value="BPJS" value="<?= set_value('pengobatan') ?>">
<label class="detail" for="bpjs">BPJS</label>
</div>
</div>
</div>
<div class="form-group row" id="no_bpjs">
<label for="no_bpjs" class="col-sm-2 col-form-label">No. BPJS </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nobpjs" name="nobpjs" placeholder="Masukan Nomor BPJS" value="<?= set_value('no_bpjs') ?>">
</div>
</div>
<script>
$(function() {
$('#nobpjs').hide();

//show it when "nama" is clicked
$('#bpjs').on('click', function() {
if ($(this).prop('checked')) {
$('#nobpjs').fadeIn();
}
});

//Hide it when "umum" is clicked
$('#umum').on('click', function() {
if ($(this).prop('checked')) {
//hides umum
//$('#nobpjs').hide();
$('#nobpjs').fadeOut(); //looks nice
}

});
});
</script>

Answer 2

看起来你正在试图隐藏/显示一个元素nobpjs类，但你的html中没有它，而是有一个元素nobpjsid。

<input type="text" class="form-control" id="nobpjs"