[英]Show hide content based on check boxes, if one check box checked disable another check boxes
我有三個復選框,默認選中第一個並顯示內容,對應第一個復選框。
如果我選中了第二個復選框,則第一個復選框將取消選中並且內容將更改,對應於第二個復選框。
如果我選中第三個復選框,則復選框的 rest 將取消選中並且內容將更改,對應於第三個復選框。
以下是我的代碼,但有些代碼不起作用
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.