HTML
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
</label>
<label class="btn btn-default" id="bkash-radio">
<input type="radio" name="payment_options" value=2 autocomplete="off">bKash
</label>
</div>
<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>
jQuery 函数:
$(document).on("click", "#bkash-radio", function() {
console.log('test');
$("#trx_id").attr("type", "text");
});
$(document).on("blur", "#bkash-radio", function() {
console.log('test');
$("#trx_id").attr("type", "hidden");
});
当选择第二个单选选项时,我试图显示文本框 id=trx_id,但是当取消选择它时,我希望隐藏文本框。我怎样才能做到这一点?
最佳答案
- 定位您的
[name=' payment_options']
radio - 在
change
事件中查看this.value==="2"
- 然后分别操作
prop
type
$(document).on("change", "[name='payment_options']", function() {
$("#trx_id").prop("type", this.value==="2" ? "text" : "hidden");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
</label>
<label class="btn btn-default" id="bkash-radio">
<input type="radio" name="payment_options" value=2 autocomplete="off">bKash
</label>
</div>
<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>
关于javascript - 如何使用 jQuery 隐藏元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38821186/