仅选择一个复选框（并取消选择其余部分），如果选中了复选框，则显示输入字段

发布于 2024-11-05 19:15:44 字数 631 浏览 0 评论 0原文

我有一个带有“是”和“否”作为两个复选框的表单。这些最初是未经选择的。我希望用户只选择其中之一，如果他们不想做出决定，则可以选择取消选择（这就是我不使用单选按钮的原因）。选择“是”应取消选择“否”，反之亦然。我不知道该怎么做。我正在使用 PHP (codeigniter)、Javascript 和 JQuery。

其次，选择“是”或“否”后，需要显示一个输入字段。我已经有了这个设置，但它会切换“onclick”操作，这意味着选择“是”两次显示并隐藏输入字段！我希望输入字段在选择“是”或“否”时显示，如果未选择“是”和“否”则消失。

<块引用>

$do_toggle = "onClick=\"javascript:toggle('togglenote');\"";

echo form_radio('决定'.$key,'y',FALSE,$do_toggle)."是";

echo form_radio('决定'.$key,'n',FALSE,$do_toggle)."否";

回显 form_input($mytext);

// 我在上面的 form_input 周围放置了一个 div 标签
// 但它没有显示在 StackOverflow 问题中...
// 但它的存在是为了让切换工作。

原文

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.

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! 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与他有关 2024-11-12 19:15:44

假设你的 html 是这样的（我认为是这样）：

<input type="checkbox" name="decisionY" value="y" /> Yes
<input type="checkbox" name="decisionN" value="N" /> Yes
<input type="text" id="togglenote" name="togglenote" />

你的 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();
     }
  });
});

希望这有帮助。干杯。

Assuming your html is like this (i think it is):

<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:

$(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.

回复收藏 0 原文

笑脸一如从前 2024-11-12 19:15:44

这应该做你想要的：

$("#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();
}
});

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();
}
});

回复收藏 0 原文