设置第一个单选按钮检查并获取 jquery 中的值
Set first radio button check and get value in jquery
我有 3 个单选按钮,我试图设置选中第一个单选按钮,我做到了,但默认情况下我没有获得选中第一个按钮的价值。为此,我尝试使用 .trigger('change)
和 .click()
但没有成功。
这是我的按钮截图:
如果我点击它就会得到值,否则它不会给出他的值。
谁能告诉我我做错了什么?
$(document).ready(function() {
$('.package_validity_child').each(function() {
$("input[name='plan_name_selector']", this).get(0).checked = true;
}).trigger('change');
$('.plan_name').change(function() {
var plan_name = $(".selected_plan_name").val();
if (plan_name === 'Daily') {
$('.days_names').css('display', 'none');
$('.select_days').css('display', 'none');
} else {
$('.days_names').css('display', 'block');
$('.select_days').css('display', 'block');
}
});
$("input[name='plan_name_selector']").click(function() {
var value = $("input[name='plan_name_selector']:checked").val();
$('.selected_plan_name').val(value);
$('.selected_plan_nameVal').html("You have chosen <b>" + value + "</b> validity.");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="package_validity_child">
<div class="custom-control custom-radio custom-control-inline">
<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">
<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">
<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>
<input type="" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>
我不太确定,您想做什么,但我想您希望在页面加载时在您的文本输入中包含 "Daily"?如果这是正确的,您应该在页面加载时添加一些逻辑,而不仅仅是在点击时:
$(document).ready(function() {
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.");
if (value === 'Daily') {
$('.days_names').css('display', 'none');
$('.select_days').css('display', 'none');
} else {
$('.days_names').css('display', 'block');
$('.select_days').css('display', 'block');
}
$('.package_validity_child').each(function() {
$("input[name='plan_name_selector']", this).get(0).checked = true;
}).trigger('change');
$('.plan_name').change(function() {
var plan_name = $(".selected_plan_name").val();
if (plan_name === 'Daily') {
$('.days_names').css('display', 'none');
$('.select_days').css('display', 'none');
} else {
$('.days_names').css('display', 'block');
$('.select_days').css('display', 'block');
}
});
$("input[name='plan_name_selector']").click(function() {
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.");
});
});
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
</head>
<body>
<div class="package_validity_child">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily" checked>
<label class="custom-control-label" for="daily">Daily</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<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">
<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>
<input type="" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>
</body>
</html>
您可以使用函数调用事件。请查看示例代码:
$(document).ready(function() {
$('input[name="plan_name_selector"]:first').attr("checked", true);
check_plan_name_selector();
$('.plan_name').change(function() {
check_plan_name();
});
$("input[name='plan_name_selector']").click(function() {
check_plan_name_selector();
});
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.");
}
function check_plan_name()
{
var plan_name = $(".selected_plan_name").val();
if (plan_name === 'Daily') {
$('.days_names').css('display', 'none');
$('.select_days').css('display', 'none');
} else {
$('.days_names').css('display', 'block');
$('.select_days').css('display', 'block');
}
}
});
如上所述,您应该在初始 checkbox
操作后添加函数调用。我建议您创建一个单独的函数并调用它来完成您的工作。此外,仅使用一个 change
处理程序来满足您的所有需求可能非常有用,而无需额外的 click
处理程序。您应该尝试 jQuery 函数 toggle,它与 display: none/bock;
具有相同的功能,但方法更简单。
$(document).ready(function() {
$('.package_validity_child').each(function() {
const $firstCb = $(this).find("input[name='plan_name_selector']").first();
$firstCb.prop('checked', true);
showValue($firstCb.val());
});
$('.plan_name').on('change', function() {
const hideDays = $(this).val() !== 'Daily';
$('.days_names').toggle(hideDays);
$('.select_days').toggle(hideDays);
showValue($(this).val());
});
function showValue(value) {
$('.selected_plan_name').val(value).html("You have choosed <b>" + value + "</b> validity.");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="package_validity_child">
<div class="custom-control custom-radio custom-control-inline">
<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">
<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">
<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>
<input type="" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>
我有 3 个单选按钮,我试图设置选中第一个单选按钮,我做到了,但默认情况下我没有获得选中第一个按钮的价值。为此,我尝试使用 .trigger('change)
和 .click()
但没有成功。
这是我的按钮截图:
如果我点击它就会得到值,否则它不会给出他的值。
谁能告诉我我做错了什么?
$(document).ready(function() {
$('.package_validity_child').each(function() {
$("input[name='plan_name_selector']", this).get(0).checked = true;
}).trigger('change');
$('.plan_name').change(function() {
var plan_name = $(".selected_plan_name").val();
if (plan_name === 'Daily') {
$('.days_names').css('display', 'none');
$('.select_days').css('display', 'none');
} else {
$('.days_names').css('display', 'block');
$('.select_days').css('display', 'block');
}
});
$("input[name='plan_name_selector']").click(function() {
var value = $("input[name='plan_name_selector']:checked").val();
$('.selected_plan_name').val(value);
$('.selected_plan_nameVal').html("You have chosen <b>" + value + "</b> validity.");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="package_validity_child">
<div class="custom-control custom-radio custom-control-inline">
<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">
<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">
<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>
<input type="" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>
我不太确定,您想做什么,但我想您希望在页面加载时在您的文本输入中包含 "Daily"?如果这是正确的,您应该在页面加载时添加一些逻辑,而不仅仅是在点击时:
$(document).ready(function() {
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.");
if (value === 'Daily') {
$('.days_names').css('display', 'none');
$('.select_days').css('display', 'none');
} else {
$('.days_names').css('display', 'block');
$('.select_days').css('display', 'block');
}
$('.package_validity_child').each(function() {
$("input[name='plan_name_selector']", this).get(0).checked = true;
}).trigger('change');
$('.plan_name').change(function() {
var plan_name = $(".selected_plan_name").val();
if (plan_name === 'Daily') {
$('.days_names').css('display', 'none');
$('.select_days').css('display', 'none');
} else {
$('.days_names').css('display', 'block');
$('.select_days').css('display', 'block');
}
});
$("input[name='plan_name_selector']").click(function() {
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.");
});
});
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
</head>
<body>
<div class="package_validity_child">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily" checked>
<label class="custom-control-label" for="daily">Daily</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<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">
<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>
<input type="" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>
</body>
</html>
您可以使用函数调用事件。请查看示例代码:
$(document).ready(function() {
$('input[name="plan_name_selector"]:first').attr("checked", true);
check_plan_name_selector();
$('.plan_name').change(function() {
check_plan_name();
});
$("input[name='plan_name_selector']").click(function() {
check_plan_name_selector();
});
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.");
}
function check_plan_name()
{
var plan_name = $(".selected_plan_name").val();
if (plan_name === 'Daily') {
$('.days_names').css('display', 'none');
$('.select_days').css('display', 'none');
} else {
$('.days_names').css('display', 'block');
$('.select_days').css('display', 'block');
}
}
});
如上所述,您应该在初始 checkbox
操作后添加函数调用。我建议您创建一个单独的函数并调用它来完成您的工作。此外,仅使用一个 change
处理程序来满足您的所有需求可能非常有用,而无需额外的 click
处理程序。您应该尝试 jQuery 函数 toggle,它与 display: none/bock;
具有相同的功能,但方法更简单。
$(document).ready(function() {
$('.package_validity_child').each(function() {
const $firstCb = $(this).find("input[name='plan_name_selector']").first();
$firstCb.prop('checked', true);
showValue($firstCb.val());
});
$('.plan_name').on('change', function() {
const hideDays = $(this).val() !== 'Daily';
$('.days_names').toggle(hideDays);
$('.select_days').toggle(hideDays);
showValue($(this).val());
});
function showValue(value) {
$('.selected_plan_name').val(value).html("You have choosed <b>" + value + "</b> validity.");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="package_validity_child">
<div class="custom-control custom-radio custom-control-inline">
<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">
<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">
<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>
<input type="" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>