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

How to work with two checkbox using jQuery

本文关键字：两个 复选框 何使用 jQuery 处理      更新时间：2023-09-26

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

我已经为输入复选框YES写了一些第一个代码，它运行良好，但如果输入NO是check，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>

您需要单选按钮。请尝试以下代码。

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

检查这个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>

或者如果你想要"是"answers"否"选项

 <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，并取消选中"否"（如果选中）和向后

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

勾选此主题：使用javascript 使复选框的行为类似于单选按钮

Fiddle：http://jsfiddle.net/ojensc2y/

相关文章：