Question

这是我的HTML代码

<input class="agree" name="agree" type="checkbox" value="1" /> 
<label for="agree"> I agree.</label>
<input type="button" name="agreebutton" value="Continue" />

<div class="showIfcheked"> some content </div>

我想在选中复选框（showIfcheked）时显示DIV agree内容如果未选中alert消息“，请检查以继续”。

如何使用Javascript执行此操作？

Answer 1

您可以使用点击活动来执行此操作：当一个人点击按钮如果chechbox 值被选中时显示，如果为空则显示警告：

访问此页面了解相关信息： https://www.w3schools.com/js/js_events.asp

您可以也可以使用 jquery 执行此操作：

访问此页面以获取 jquery事件： https://www.w3schools.com/jquery/jquery_events.asp

（ 我喜欢jquery因为它很聪明。 ）

<强>：）

Answer 2

以下是以下代码：

<强> HTML

<input class="agree" name="agree" id="agree" type="checkbox" value="1" /> 
<label for="agree"> I Agree.</label>
<br/>
<input type="button" name="agreebutton" id="agreebutton" value="Continue" />

<div class="showIfcheked" style="display:none;"> Check Box is Checked!</div>

的JavaScript

仅替换HTML上面的按钮元素！

 <input type="button" name="agreebutton" id="agreebutton" value="Continue" onclick="checkFunction()" />

     function checkFunction()
     {
       var chk = document.getElementById("agree").checked;
       var x = document.getElementByClass('showIfcheked');  
       if(chk)
       {
         // Checkbox is Checked
         x.style.display = 'block'; 
       }else{
         alert('please check to continue');
         x.style.display = 'none';
       }
     }

jQuery （JSFiddle：https://jsfiddle.net/2orkm9y1/）

$(document).ready(function() {

$("#agreebutton").on("click", function(e) {

if ($("#agree").is(':checked')) {
  $('.showIfcheked').show();
} else {
  $('.showIfcheked').hide();
  alert('please check to continue');
  e.preventDefault();
}
});

});

Answer 3

运行以下代码段。或者在这里找到工作小提琴：https://jsfiddle.net/ash06229/hsre54f7/1/

将 class =“agree”更改为 id =“同意”显示它适用于“我同意”文字。

的jquery CSS

$(document).ready(function() {
  $("#btn-agree").on("click", function(e) {
    if ($("#agree").is(':checked')) {
      $('.showIfcheked').show();
    } else {
      $('.showIfcheked').hide(10, alert('Please check to continue.'));
    }
  });
});

.showIfcheked {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="agree" name="agree" type="checkbox" value="1" /> 
<label for="agree"> I agree.</label>
<input type="button" name="agreebutton" value="Continue" id="btn-agree" />

<div class="showIfcheked"> some content </div>

如果选中复选框，则提交按钮onclick show div content

3 个答案: