如何使用 jQuery 处理两个复选框答案

【问题标题】：How to work with two checkbox using jQuery如何使用 jQuery 处理两个复选框
【发布时间】：2015-12-12 17:47:13
【问题描述】：

我想显示一个包含公司详细信息输入的 div，如果用户检查输入 YES 然后显示 div，如果用户检查输入 NO 然后隐藏 div。

我已经为输入复选框 YES 编写了一些第一个代码，它工作正常，但是如果输入 NO 是检查 div 仍然存在，我想隐藏它并取消选中 YES 输入复选框。

有人帮我修改脚本。

JavaScript：

$(document).ready(function (e) {
    $("#yes").click(function () {
        if($(this).is(":checked")) {
            $("#companydetials").show();
        } else {
            $("#companydetials").hide();
        }
    })
});

HTML：

<p>Do you have a company?
    <input name="comorno" type="checkbox" id="yes" form="signupform"> Yes
    <input type="checkbox" name="comorno" id="no">No</p>

【问题讨论】：

在这种情况下应该使用单选按钮......也不是你必须玩change事件而不是click事件..
使用单个复选框和代码 $(document).ready(function (e) { $("#yes").change(function () { $("#companydetials").toggle(this.checked); }); });
@Tushar 听起来不错。
谢谢，但我的代码和你的一样。我想要两个复选框，一个没有 id，一个有 Yes id。如果选中是，则显示 div，如果选中否，则蜂巢潜水，只应选中一个。你能帮忙吗？

标签： javascript jquery

【解决方案1】：

你需要你想要的单选按钮。试试下面的代码。

$(document).ready(function (e) {
    $("input[name=comorno]").change(function () {
        if($(this).is("#yes")) {
            $("#companydetials").show();
        } else {
            $("#companydetials").hide();
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Do you have a company?
    <input name="comorno" type="radio" id="yes" value="" form="signupform" checked> Yes
    <input type="radio" name="comorno" id="no">No</p>

<div id="companydetials">
  
  Company Details Here
  
</div>

或者如果在这种情况下使用复选框对你来说是必要的，你可以这样做 -

$(document).ready(function (e) {
        $("input[name^=comorno]").change(function () {
            if($(this).is("#yes")) {
                $("#companydetials").show();
              $("#no").prop("checked", false);
            } else {
                $("#companydetials").hide();              
               $("#yes").prop("checked", false);
            }
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p>Do you have a company?
        <input name="comorno[]" type="checkbox" id="yes" value="" form="signupform" checked> Yes
        <input name="comorno[]" type="checkbox" id="no">No</p>

    <div id="companydetials">
      
      Company Details Here
      
    </div>

【讨论】：

@JamesFavour 欢迎您。还有一件事要记住，在复选框的情况下，您不能有相同的名称，这就是您需要单选按钮的原因。但是，如果您想使用复选框，则名称应类似于 comorno[]，它将在发布期间保存所有选中的复选框值。编码愉快。
@Shuvro：复选框代码不起作用。我认为这应该使用单选按钮以获得最佳实践。
@MrNeo 前段时间编辑了 html，忘记更新 js，现在修复。是的，单选按钮是这里的绝对选项。

【解决方案2】：

检查这个 jsfiddle 示例 - http://jsfiddle.net/ko64a3a8/

<input name="check_status" type="checkbox" class="mycheckbox" value="yes"/>
<div id="myDiv">text</div>

<script>
$(function(){
  $('.mycheckbox').change(function(){
    if($(this).is(':checked')){
      $('#myDiv').show();
    }else{
      $('#myDiv').hide();
    }
  })
});
</script>

或者如果您想要“是”和“否”选项

 <label for="statYes">Yes</label>
 <input name="check_status" id="statYes" type="checkbox" class="mycheckbox" value="yes"/>
 <label for="statNo">No</label>
 <input name="check_status" id="statNo" type="checkbox" class="mycheckbox" value="no"/>

 <div id="myDiv">text</div>

<script>
$(function(){
  $('#myDiv').hide();
  $('.mycheckbox').change(function(){
    if($(this).is(':checked')){
      if($(this).val() == 'yes') {
        $('#statNo').removeAttr('checked');
        $('#myDiv').show();
      }else{
        $('#statYes').removeAttr('checked');
        $('#myDiv').hide();
      }
    }
 })
});
</script>

UPD：这是http://jsfiddle.net/3L3b580h/ 的示例当您单击“是”时，它会显示 div 并取消选中“否”（如果已选中）并向后移动

【讨论】：

谢谢，但我的代码和你的一样。我想要两个复选框，一个没有 id，一个有 Yes id。如果选中是，则显示 div，如果选中否，则选中蜂巢潜水，只应选中一个。你能帮忙吗？ @Manchary Manchaary
我将做一个例子，当点击“否”时检查“是”

【解决方案3】：

$(document).ready(function (e) {
  $('input[name="comorno"]').each(function()
    {
      $(this).change(function()
       {
          $('input[name="comorno"]').prop('checked',false);
          $(this).prop('checked',true);

          if($('#yes').is(':checked')) {
            $('#companydetails').show()
          } else {
            $('#companydetails').hide()
          }
       });
    });
});

查看此主题：make checkbox behave like radio buttons with javascript

小提琴：http://jsfiddle.net/ojensc2y/

【讨论】：