Question

我的asp.net core 2.0 / mvc6项目中有一个元素，它是类型复选框的输入。我只是测试如何在切换此复选框时更改另一个隐藏元素的值，但无法使其正常工作，所以我使用了显示的简单jquery来查看点击结果是什么。

HTML

<div class="col-xs-7 col-sm-8">
     <label class="css-input switch switch-sm switch-success">
          <input type="checkbox" id="validation-terms" name="validation-terms"><span></span> I agree to all terms
     </label>
 </div>
 <div class="col-xs-5 col-sm-4">
     <div class="font-s13 text-right push-5-t">
         <a href="#" data-toggle="modal" data-target="#modal-terms">View Terms</a>
      </div>
</div>
@Html.HiddenFor(m =>m.Terms, new { id="register-terms" })

的Javascript

$ terms是元素的变量

var $terms = $("#validation-terms");
//toggle the slider when terms modal agree button clicked
        $terms.on('click', function () {

            if ($terms.is(':checked')) {
                //$terms.prop('checked', false);
                //$('#register-terms').val(false);
                alert("changing to blank");
            } else {
                //$terms.prop('checked', true);
                //$('#register-terms').val(true); 
                alert("changing to green");
            }

        });

页面加载滑块未选中（空白，灰色，无论你想调用它），这是正常行为，除非你添加了checked属性。单击复选框（它是一个滑块），你会期望javascript检测它是未选中的并显示更改为绿色消息，行为是相反的！第一次单击它时，您将更改为空白消息，滑块变为绿色，当您再次单击它时，现在它处于已检查状态（据称），您将更改为绿色消息并返回空白。

我在这里缺少什么？

Answer 1

我不确定你的$ terms变量是否被正确使用，因为你没有包含初始化$ terms的代码，但使用了对＃34;这个＆＃34;在click函数内部将获得被单击的复选框的实际值。请参阅下面的代码段，了解它是否有助于理解该问题。根据您提供的代码，它似乎向我显示了正确的警报：

＆＃13;

$(function(){
  //toggle the slider when terms modal agree button clicked
  $terms = $("#validation-terms");
  $terms.change(function () {
      //If the current click if checking the box:
      if ($(this).is(':checked')) {
          //$terms.prop('checked', false);
          //$('#register-terms').val(false);
          alert("Checking the checkbox");
      } else { //If the current click is un-checking the box:
          //$terms.prop('checked', true);
          //$('#register-terms').val(true); 
          alert("Unchecking the checkbox");
      }

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-7 col-sm-8">
     <label class="css-input switch switch-sm switch-success">
          <input type="checkbox" id="validation-terms" name="validation-terms"><span></span> I agree to all terms
     </label>
 </div>
 <div class="col-xs-5 col-sm-4">
     <div class="font-s13 text-right push-5-t">
         <a href="#" data-toggle="modal" data-target="#modal-terms">View Terms</a>
      </div>
</div>
<input type="hidden" id="register-terms" >

＆＃13;

以下基本上是一个更改或点击事件如何与复选框一起使用：

$('#checkbox1').change(function() {
   if($(this).is(":checked")) {
      //'checked' event code
   }
   else {
      //'unchecked' event code
   }
});

输入类型中的意外javascript行为复选框

1 个答案: