[英]Select only one checkbox (and deselect rest) and show input field if checkbox selected
I have a form with "Yes" and "No" as two checkboxes.我有一个带有“是”和“否”作为两个复选框的表单。 These come in unselected at first.
这些一开始是未选中的。 I'd like the user to only select one of these with the option to deselect their choice if they don't want to make a decision (which is why I didn't use radio buttons).
如果用户不想做出决定(这就是我没有使用单选按钮的原因),我希望用户只选择其中一个,并可以取消选择他们的选择。 Selecting Yes should deselect No and vice versa.
选择是应该取消选择否,反之亦然。 I'm not sure how to do this.
我不知道该怎么做。 I'm using PHP (codeigniter), Javascript and JQuery.
我正在使用 PHP (codeigniter)、Javascript 和 JQuery。
Secondly, after either Yes or No is selected, an input field needs to be displayed.其次,选择是或否后,需要显示输入字段。 I've got this setup but it toggles on the "onclick" action, which means selecting Yes twice shows and hides the input field!
我有这个设置,但它在“onclick”操作上切换,这意味着选择是两次显示并隐藏输入字段! I want the input field to show if Yes or No are selected and disappear if the both Yes and No are unselected.
我希望输入字段显示是否选择了是或否,如果未选择是和否,则消失。
$do_toggle = "onClick=\\"javascript:toggle('togglenote');\\""; echo form_radio('decision'.$key,'y',FALSE,$do_toggle)."Yes "; echo form_radio('decision'.$key,'n',FALSE,$do_toggle)."No"; echo form_input($mytext); // I put a div tag around the form_input above // but it's not showing in the StackOverflow question... // but it's there for the toggle to work.
Assuming your html is like this (i think it is):假设你的 html 是这样的(我认为是这样):
<input type="checkbox" name="decisionY" value="y" /> Yes
<input type="checkbox" name="decisionN" value="N" /> Yes
<input type="text" id="togglenote" name="togglenote" />
Your js would be:你的js将是:
$(document).ready(function(){
$(":checkbox[name^='decision']").change(function(){
if($(this).is(":checked")){
$(":checkbox[name[^='decision']").attr("checked", false); //Uncheck the other
$(this).attr("checked", true);
$("#togglenote").show();
}
if($(":checkbox[name^='decision']:checked").size() == 0){
$("#togglenote").hide();
}
});
});
Hope this helps.希望这可以帮助。 Cheers.
干杯。
This should do what you want:这应该做你想做的:
$("#checkbox1").change(function() {
if ($(this).attr("checked") && $("#checkbox2").attr("checked")) {
$("checkbox2").removeAttr("checked");
} else if ($(this).attr("checked")) {
$("#inputfield").show();
} else {
$("#inputfield").hide();
}
});
$("#checkbox2").change(function() {
if ($(this).attr("checked") && $("#checkbox1").attr("checked")) {
$("checkbox1").removeAttr("checked");
} else if ($(this).attr("checked")) {
$("#inputfield").show();
} else {
$("#inputfield").hide();
}
});
PS.附注。 JQuery works not at my nokia 6303c :) device, hard coded - will work ... so application must have 2 parts.
JQuery 不适用于我的 nokia 6303c :) 设备,硬编码 - 会工作......所以应用程序必须有 2 个部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.