jQuery复选框验证（不带表单）

Question

I want to make a validation function with jQuery or pure javascript.

this is my checkbox

<input type="checkbox" name="terms" id="terms">

and this is my link button

<label id="kosullar" for="terms">
<a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="" href="kosullar.php">KULLANIM  &nbsp;KOSULLARINI  &nbsp;KABUL&nbsp; EDIYORUM</a>
</label>

If checkbox is checked process will continue to redirect my href url if not i want to show alert() to user.

Thats it.

Would you show me an example?

Answer 1

In your onclick define a function and pass this , return false to stop the default action

onclick="verifyCheck(this); return false;"

function verifyCheck(elem) {
    var cb = document.getElememtById("terms");

    if (cb.checked) { 
        location.href = elem.href;
    } else {
         alert("Check the box!");
    }
}

Answer 2

$('.fancybox-effects-d').click(function(e) {
    if (!($('#fancybox-effects-d').is(':checked'))) {
        e.preventDefault();
    }
});

Answer 3

Try this.

 <a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="return Validate();" href="kosullar.php">

Javascript method

function Validate()
{
 If($("#terms").is(":checked"))
 {
    //do your code to go to next step
 }
 else
 {
  alert("Please check the checkbox");
  return false;
 }
}

Answer 4

Can you try this,

     function Accept(dat){

            var terms = $('#terms').is(':checked');

            if(terms){
                window.location.href=dat.href;
            }else{
                alert('not checked!');
                return false;
            }
      }

HTML Section:

    <input type="checkbox" name="terms" id="terms">

    <label id="kosullar" for="terms">
        <a class="fancybox-effects-d" data-fancybox-type="iframe" onclick="return Accept(this);" href="kosullar.php">KULLANIM  &nbsp;KOSULLARINI  &nbsp;KABUL&nbsp; EDIYORUM</a>
    </label>

Another method:

 $(function(){

      $(".fancybox-effects-d").click(function(){

           var terms = $('#terms').is(':checked');

            if(terms){
                window.location.href=$(this).attr('href');
            }else{
                alert('not checked!');
                return false;
            }
        });

   });

HTML:

<input type="checkbox" name="terms" id="terms">

    <label id="kosullar" for="terms">
        <a class="fancybox-effects-d" data-fancybox-type="iframe"  href="kosullar.php">KULLANIM  &nbsp;KOSULLARINI  &nbsp;KABUL&nbsp; EDIYORUM</a>
</label>