Question

如果选中复选框，

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

我要求这样做的原因是因为我正在开发一个自定义的mouthguard网站，我的客户希望访问者点击一个复选框（这意味着他们同意这些条款），然后才能将护口器添加到购物车并继续结帐。

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

<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();
   } 
});

选中复选框后，可以使锚标签可单击

3 个答案: