Question

我有一段代码，但它很长且没必要。我试过改进它，以便一个功能可以解决这个问题，但是我没有成功。

<div class="form-group">
    <input class="extras" type="checkbox" name="extra-one" />
    <input type="text" id="hidden-one" />
</div>
<div class="form-group">
    <input class="extras" type="checkbox" name="extra-two" />
    <input type="text" id="hidden-two" />
</div>
    <div class="form-group">
    <input class="extras" type="checkbox" name="extra-three" />
    <input type="text" id="hidden-three" />
</div>

我正在使用一个插件，使复选框看起来很漂亮，并且它带有一个方法，当选中或未选中复选框时，该方法返回true或false。我希望复选框下面的输入写出＆＃39; true＆＃39;或者＆＃39; false＆＃39;取决于检查的状态。如果我为每个方法执行单独的方法，但是我想将它们全部捆绑到一个方法中，这是有效的。

状态是复选框的当前状态（true或false）

我的尝试

$('.extras').on('switchChange.bootstrapSwitch', function(event, state) {
    $(this).find('input').val(state);
});

这什么都不产生。没有错误或功能。

修改

我已经检查了插件如何影响DOM结构。以下是它对其中一个表单组的作用。

<div class="form-group">
    <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate bootstra-switch-off">
        <div class="bootstrap-switch-container">
            <span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
            <span class="bootstrap-switch-label"></span>
            <span class="bootstrap-switch-handle-off bootstrap-switch-default"></span>
            <input class="extras" type="checkbox" name="extra-one" />
        </div>
    </div>
    <input type="text" id="hidden-one" />
</div>

Answer 1

在这种情况下，引导程序插件可能会更改dom结构，您可能必须使用

$(".extras").each(function () {
    $(this).next().val(this.checked)
}).bootstrapSwitch();

$('.extras').on('switchChange.bootstrapSwitch', function (event, state) {
    $(this).closest('.form-group').find('input:text').val(state);
});

$(".extras").each(function() {
  $(this).next().val(this.checked)
}).bootstrapSwitch();

$('.extras').on('switchChange.bootstrapSwitch', function(event, state) {
  $(this).closest('.form-group').find('input:text').val(state);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" />

<div class="form-group">
  <input class="extras" type="checkbox" name="extra-one" />
  <input type="text" id="hidden-one" />
</div>
<div class="form-group">
  <input class="extras" type="checkbox" name="extra-two" />
  <input type="text" id="hidden-two" />
</div>
<div class="form-group">
  <input class="extras" type="checkbox" name="extra-three" />
  <input type="text" id="hidden-three" />
</div>

Answer 2

没有插件：

$('.extras').next().val($('.extras').prop("checked"));

$('.extras').click(function(){
        $(this).next().val($(this).prop("checked"));
 });

jsfiddle

这里有新的DOM：代表团挑选了背景问题。

$( ".form-group" ).delegate( ".extras", "click", function( event ) {  
  var elem = $(event.delegateTarget).find("input[type='text']");
  elem.val($(this).prop('checked'));
});

jsfiddle

jQuery使用一个函数填充隐藏文本输入

我的尝试

修改

2 个答案: