选中复选框时使锚标记可单击

Question

如果选中了复选框，是否有使锚标签可点击的方法，反之亦然（如果未选中复选框则无法使锚标签可点击）？

我之所以要求这样做，是因为我正在自定义护牙站点上工作，并且我的客户希望访客在将护齿添加到购物车并继续进行结帐之前，先单击复选框（表示他们同意条款）。

现在我在图像标签周围有一个锚标签（由于签署了保密协议，我无法显示任何代码，但是我会显示设置）：

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

<a href="" target="" class="" onClick=""><img src="" border="" alt="" /></a>

请让我知道我如何实现我的目标。 谢谢。

Answer 1

在锚点的onclick中，如果未选中该复选框，则可以返回false；如果已选中该复选框，则可以返回true。 这表示选中此复选框后，将跟随该链接。

<input type="checkbox" name ="" id="terms" />
<a href="http://google.com" target="" class="" onClick="return checkTerms();"><img src="" border="" alt="" /></a>

<script>
function checkTerms()
{
    var ticked = document.getElementById("terms").checked;

    if(!ticked) alert("Please accept the terms");

    return ticked;
}
</script>

Answer 2

您必须将此添加到代码中：

<a href="" target="" class="" onClick="checkInput(); return false;"><img src="" border="" alt="" /></a>

然后在checkInput内部，只需检查复选框的状态。

如果选中，则使用

document.location = "Add to Cart Location";

或者：您可以使用此：

document.getElementById("myCheckBox").addEventListener ("change", function() {
    if(this.checked) {
        document.getElementById("myLink").href = "Proper HREF";
    } else {
        document.getElementById("myLink").href = "#";
    }
}

Answer 3

假设您将其包裹在div中，则可以这样进行操作：

<div class="login">
 <span>I have read and agree to the terms and conditions. <input type="checkbox" name ="" id="" /></span>
 <a href="" target="" class="" onClick=""><img src="" border="" alt="" /></a>
</div>

然后在您的JavaScript中。

$('.login a').click(function(ev) {
   var $checkbox = $('.login input');

   if ( $checkbox.is(':checked') ) {
     console.log('GO AHEAD');
   } else {
     alert('You need to accept the terms and conditions before proceeding');
     $checkbox.addClass('error');
     ev.preventDefault();
   } 
});