[英]Unselect all other checkboxes if select daily (checkbox)
我创建了电子商务网站,有 package 问题形式,如用户可以自定义 package。 第一个问题中有三个单选按钮:
1. Daily
2. Weekly
3. Monthly
当我daily
select 时隐藏 2 个问题,如果我weekly or monthly
select 则显示两个问题,这两个问题是:
1. How many days you need service in a week?
2. Select the days.
有一张预览卡,让我给你看截图,这里是截图:
见截图 1
见截图 2
见截图 3
现在,在第三个(最后一个)屏幕截图中看到,如果我点击返回daily
单选框,则隐藏了 2 个问题,但预览卡中没有隐藏文本,我希望如果我点击/点击返回daily
单选按钮,然后应该取消选中两个问题(我隐藏的问题),并且应该从预览卡中删除文本。
这是 html 代码:
<div class="select_package_validity">
<h5 class="h5-responsive font-weight-bold q1_text"></h5>
<div class="package_validity_child">
<div class="custom-control custom-radio custom-control-inline plan_name_daily">
<input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily">
<label class="custom-control-label" for="daily">Daily</label>
</div>
<div class="custom-control custom-radio custom-control-inline plan_name_weekly">
<input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
<label class="custom-control-label" for="weekly">Weekly</label>
</div>
<div class="custom-control custom-radio custom-control-inline plan_name_monthly">
<input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
<label class="custom-control-label" for="monthly">Monthly</label>
</div>
</div>
<input type="hidden" name="plan_name" class="form-control selected_plan_name" />
</div>
<div class="select_days mt-4">
<h5 class="h5-responsive font-weight-bold q2_text"></h5>
<div class="custom-control custom-radio custom-control-inline ml-4">
<input type="radio" class="custom-control-input plan_days" id="5" name="plan_days_selector" value="5">
<label class="custom-control-label" for="5">5</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input plan_days" id="6" name="plan_days_selector" value="6">
<label class="custom-control-label" for="6">6</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input plan_days" id="7" name="plan_days_selector" value="7">
<label class="custom-control-label" for="7">7</label>
</div>
<input type="hidden" name="plan_days" class="form-control selected_plan_days" />
</div>
<div class="days_names mt-4">
<h5 class="h5-responsive font-weight-bold q3_text mb-2"></h5>
<div class="ml-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
<label class="custom-control-label" for="monday">Monday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
<label class="custom-control-label" for="tuesday">Tuesday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
<label class="custom-control-label" for="wednesday">Wednesday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
<label class="custom-control-label" for="thursday">Thursday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
<label class="custom-control-label" for="friday">Friday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
<label class="custom-control-label" for="saturday">Saturday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
<label class="custom-control-label" for="sunday">Sunday</label>
</div>
</div>
<input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>
这是 jQuery 代码:
$(document).ready(function() {
$('.q1_text').text("1. Select your package validity.");
$('.q2_text').text("2. How many days you need service in a week?");
$('.q3_text').text("3. Select the days.");
$('input[name="plan_name_selector"]:first').attr("checked", true);
check_plan_name_selector();
check_plan_name();
$('.plan_name').change(function() {
check_plan_name();
});
$("input[name='plan_name_selector']").click(function() {
check_plan_name_selector();
});
function check_plan_name() {
var plan_name = $(".selected_plan_name").val();
if (plan_name === 'Daily') {
$('.q4_text').text("2. Select your food time");
$('.days_names').hide();
$('.select_days').hide();
} else {
$('.q4_text').text("4. Select your food time");
$('.days_names').show();
$('.select_days').show();
}
}
function check_plan_name_selector() {
var value = $("input[name='plan_name_selector']:checked").val();
$('.selected_plan_name').val(value);
$('.selected_plan_nameVal').html("You have choosed <b>" + value + "</b> validity.");
}
$("input[name='day_name_selector']").on('change', function(e) {
var limit = $("input[name='plan_days_selector']:checked").val();
if ($("input[name='day_name_selector']:checked").length > limit) {
$(this).prop('checked', false);
}
});
$(".plan_days").change(function() {
let days = this.value;
$("input[name='day_name_selector']").each(function(index) {
this.checked = index < days;
}).trigger('change');
});
$("input[name='day_name_selector']").change(function() {
var final = $('input[name="day_name_selector"]:checked').map(function() {
return $(this).val();
}).get();
$('.selected_days_names').val(final.join(", "));
$('.selected_days_namesVal').html("You have choosed <b>" + final.join(", ") + "<br>");
});
$("input[name='plan_days_selector']").click(function() {
check_plan_days_selector();
});
function check_plan_days_selector(){
var value = $("input[name='plan_days_selector']:checked").val();
$(".selected_plan_days").val(value);
$(".selected_plan_daysVal").html("<b>"+value+"</b> days service.");
}
});
我的网站已经上线,你可以从这里查看Foodbox.pk ,我卡住了,请帮助我
只需在您的 function 内处理它们:
function check_plan_name() {
var plan_name = $(".selected_plan_name").val();
if (plan_name === 'Daily') {
$('.q4_text').text("2. Select your food time");
$('.days_names').hide();
$('.select_days').hide();
$('.selected_days_namesVal').hide(); //Hide them when Daily is selected
$('.selected_plan_daysVal').hide();
} else {
$('.q4_text').text("4. Select your food time");
$('.days_names').show();
$('.select_days').show();
$('.selected_days_namesVal').show(); // Show them when not
$('.selected_plan_daysVal').show();
}
}
我做到了,它像冠军一样完美。
function check_plan_name() {
.......
if (plan_name === 'Daily') {
........
$('.selected_days_namesVal').empty();
$('.selected_plan_daysVal').empty();
$('input[name="plan_days_selector"]').each(function() {
this.checked = false;
});
$('input[name="day_name_selector"]').each(function() {
this.checked = false;
});
$('.selected_plan_days').attr('value', '');
$('.selected_days_names').attr('value', '');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.