javascript - 如何使用 jQuery 处理两个复选框

Question

我想显示一个包含公司详细信息输入的 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>

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