[英]Show hide content based on check boxes, if one check box checked disable another check boxes
I have three check boxes, first one will be checked by default and content will display, corresponding to first check box.我有三个复选框,默认选中第一个并显示内容,对应第一个复选框。
if I checked second checked box, first check box will unchecked and content will change, corresponding to second check box.如果我选中了第二个复选框,则第一个复选框将取消选中并且内容将更改,对应于第二个复选框。
If I checked third checkbox, rest of the check boxes will unchecked and content will change, corresponding to third check box.如果我选中第三个复选框,则复选框的 rest 将取消选中并且内容将更改,对应于第三个复选框。
Below is the my code, but some how its not working以下是我的代码,但有些代码不起作用
<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>
1 way you can solve it is by getting the index of the checkbox, and use that to determent what answer shall be shown.解决它的一种方法是获取复选框的索引,并使用它来阻止应显示的答案。
$(".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();
}
});
Demo with checkbox带复选框的演示
$(".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>
Demo with radio带收音机的演示
$(".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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.