JavaScript if if就像复选框一样处于初始状态

时间:2016-06-10 15:52:00

标签: javascript jquery ajax

我可以在浏览器开发者控制台中使用$("#blackbox").prop('checked')$('#blackbox').is(':checked')正确地收到true或false的复选框(黑盒)状态。试过两个。

假设我在复选框checked

中使用<input type="checkbox" id="blackbox" name="blackbox" title="Enable Something" checked>

我将获得longform输出,并选中复选框并取消选中。空复选框<input type="checkbox" id="blackbox" name="blackbox" title="Enable Something">也是如此,我最终得到的只是带有选中和未选中复选框的短数据输出。

我真正想要的是选中复选框时的长输出和取消选中复选框时的短输出。

<div class="container">
    <form action="add" id="urlform" method="POST" accept-charset="utf-8">
    <div class="control-group">
    <div class="input-append">
    <input type="checkbox" id="blackbox" name="blackbox" title="Enable Something">
    <input type="text" id="url" value="" placeholder="Text">
    <input class="btn btn-warning "type="submit" value="Shorten">
</div>
</div>
</form>
</div>
<form action="/s/add" id="longform" method="POST" accept-charset="utf-8"></form>
<script>
var form = $('#urlform');
var form2 = $('#longform');

if ($('#blackbox').is(':checked')) {
    test = form2;
} else {
    test = form;
}
form.submit(function () {
$.ajax({
    type: test.attr('method'),
    url: test.attr('action') + '?url=' + $('#url').val(),
    success: function (data) {
    test.append('<p style="color:#FFA500">' + 'https://' + location.host + '/' +
    data[0].uid + '</p>')
    }
});
return false;
});
</script>

2 个答案:

答案 0 :(得分:0)

if ($('#blackbox').is(':checked')) { ... }在页面加载时发生,form.submit多次发生,但只使用在页面加载时设置的值。

将逻辑移至form.submit()操作:

<script>
  var form = $('#urlform');
  var form2 = $('#longform');

  form.submit(function () {
    if ($('#blackbox').is(':checked')) {
      test = form2;
    } else {
      test = form;
    }
    $.ajax({
        type: test.attr('method'),
        url: test.attr('action') + '?url=' + $('#url').val(),
        success: function (data) {
          test.append('<p style="color:#FFA500">' + 'https://' + location.host + '/' +
          data[0].uid + '</p>')
        }
    });
    return false;
  });
</script>

答案 1 :(得分:0)

我会做得不同......单独留下你的submit()函数,将逻辑附加到复选框本身..也用一些三元缩短它..

$('#blackbox').change(function(){
    test = $(this).is(':checked') ? form2 : form;
});