javascript - 根据复选框显示隐藏内容,如果选中一个复选框禁用另一个复选框
问题描述
我有三个复选框,默认选中第一个并显示内容,对应第一个复选框。
如果我选中了第二个复选框,则第一个复选框将取消选中并且内容将更改,对应于第二个复选框。
如果我选中第三个复选框,则其余复选框将取消选中并且内容将更改,对应于第三个复选框。
以下是我的代码,但有些代码不起作用
<fieldset class="question">
<label for="coupon_question">Show India content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show Japan content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show China content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">India Content:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Japan Content:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">China Content:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
Below is my jquery
<script>
$(".answer").hide();
$(".coupon_question").click(function() {
if($(this).is(":checked")) {
$(".answer").show();
} else {
$(".answer").hide();
}
});
</script>
解决方案
解决它的一种方法是获取复选框的索引,并使用它来阻止应显示的答案。
$(".answer").hide();
$(".coupon_question").click(function() {
var i = $(this).index(".coupon_question");
if ($(this).is(":checked")) {
$(".answer").eq(i).show();
} else {
$(".answer").eq(i).hide();
}
});
带复选框的演示
$(".answer").hide();
$(".coupon_question").click(function() {
var i = $(this).index(".coupon_question");
if ($(this).is(":checked")) {
$(".answer").eq(i).show();
} else {
$(".answer").eq(i).hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="question">
<label for="coupon_question">Show India content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show Japan content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show China content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">India Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Japan Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">China Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
带收音机的演示
$(".answer").hide();
$(".coupon_question").click(function() {
var i = $(this).index(".coupon_question");
$(".answer").hide();
$(".answer").eq(i).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="question">
<label for="coupon_question">Show India content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show Japan content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show China content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">India Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Japan Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">China Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
推荐阅读
- javascript - 从 Google Sheets html 模板运行时,工作测试的 javascript 不起作用
- python - 这个脚本总是返回未知数。即使我的根文件夹中有文件和目录?
- javascript - 获取背景图像 url 时如何让 JQuery 替换字符串的非 URL 部分
- linux - 完全消除现代 Linux >=5.0 中的计时器滴答声
- java - 我应该返回什么而不是 null?
- facebook-graph-api - Facebook API Instagram webhook 未触发
- unix - Lex程序计数整数,双精度数,十六进制数,字符串数
- driver - NVMe 命令位于 PCIe BAR 内的什么位置?
- python-3.x - 如何直接更改散景`figure.renderers`的元素的`_property_values`?
- linux - XDP 程序 ip 链接错误:Prog 部分被拒绝:不允许操作