Question

当我选择值6时，存在复选框。当我选中复选框时，应该会出现文本框，但是当我单击复选框时，该文本框不存在。我尝试了jQuery和html代码。除了现有的文本框，其他所有内容都可以完美运行。

$(document).ready(function() {
  $('#education').on('change', function() {
      if ($(this).val() == "6") {
        $('#checkBox').show(); //text box exists
      } else {
        $('#checkBox').hide();
      }
      if ($('#checkBox').is(":checked")) {
        $("#txtData").show();
      } else {
        $("#txtData").hide();
      }

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 col-md-1">
  <div class="row">
    <div class="form-group">
      <label class="control-label col-sm-12 col-md-4"><br />
															</label>
      <div class="col-md-3">
        <input type="checkbox" id="checkBox">
      </div>
    </div>
  </div>
</div>
<div class="col-sm-4 col-md-3">
  <div class="row">
    <div class="form-group">
      <label class="control-label col-sm-12 col-md-8"><br />
															</label>
      <div class="col-md-9">
        <input type="text" class="form-control" id="txtData" style="display: none;">
      </div>
    </div>
  </div>
</div>

Answer 1

如果您希望在更改checkBox的值时显示文本框，则需要将事件侦听器放在checkBox元素上。我做到了，而且效果很好。

$(document).ready(function() {
   $('#checkBox').on('change', function() {
      if ($(this).val() == "6") {
         $('#checkBox').show(); //text box exists
      } else {
      $('#checkBox').hide();
      }
      if ($('#checkBox').is(":checked")) {
        $("#txtData").show();
      } else {
        $("#txtData").hide();
      }

    });
});

这是一个可以工作的codepen：https://codepen.io/shyrro/pen/PagvMK

Answer 2

我自己尝试过。我有解决办法。我编写了单独的函数以存在文本框。

$(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = 
$("input[name='init-one-name']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });

    });

选中复选框时无法使文本框存在

2 个答案: