2
<a href="www.google.com" class="social" id="social">Link one</a> 
<a href="www.cnn.com" class="social" id="social">Link two</a> 
<a href="www.facebook.com" class="social" id="social">Link three</a> 

我希望能够让用户:

  1. 点击一个链接
  2. 将链接 href 存储到$href变量中
  3. 用户从复选框中选择后,将用户带到该 $href位置。

我一直在使用这个小提琴

那么,如何在选择复选框时让链接转到各自的位置?

如果有人可以提供任何帮助或建议;我真的很感激谢谢!

p{
    display: inline-block;
}
input[type="checkbox"]:disabled + label{
    opacity: .5;
}
.faded{ color: grey;
    opacity: .5;
}

<p>Links should go to their respective locations upon checkbox selection</p>
<br>

<a href="www.google.com" class="social" id="social">Link one</a> 
<a href="www.cnn.com" class="social" id="social">Link two</a> 
<a href="www.facebook.com" class="social" id="social">Link three</a> 

<div class="know-your-role">
    <div id="checkwrapper">
        <form method="POST" action="">
            <p>Are you a</p>
            <input type="checkbox" id="check-1"  class="checkchoice student" value="1"><label for="check-1" class="choice student tooltip" title="Student">Student</label>
            <p>or</p>
            <input type="checkbox" id="check-2" class="checkchoice teach" value="2"><label for="check-2" class="choice teach tooltip" style="padding-right: 20px;" title="Teacher">Teacher</label>
            <p>?</p>
        </form>
    </div>
    <div class="style-select type">
        <input type="text" placeholder="What year" />
    </div>
    <p class="faded">       
     "What year" input should only appear when student is selected'
    </p>
</div>

JavaScript

$('.type').hide(); 
$(".know-your-role").hide();


$(".social").click(function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    $(".wizard").hide();
    $('.know-your-role').show('fast');
    var $student = $('input:checkbox.student');
    var $teach = $('input:checkbox.teach');

    if($student.is(':checked') & $(".year").va() != ""){
        window.location.href = href;
    }else if ($teach.is(':checked')){
        window.location.href = href;
    }
});

$(function(){
    $('#check-1').change(function() {
        $('#checkwrapper').hide();
        $('.type').css('width','110px')
        $('.type').show();
    });
});

$('input:checkbox.checkchoice').click(function(){
    var $inputs = $('input:checkbox.checkchoice');
    if($(this).is(':checked')){
        $inputs.not(this).prop('disabled',true);
    }else{
        $inputs.prop('disabled',false);
    }
});
4

1 回答 1

2
<a href="http://www.google.com" class="social">Link one</a> 
<a href="http://www.cnn.com" class="social">Link two</a> 
<a href="http://www.facebook.com" class="social">Link three</a> 

Ids 必须是唯一的,并且 href 必须在前面http://

if($student.is(':checked') & $(".year").va() != ""){

正确的语法val()不是va()

http://jsfiddle.net/knoxzin1/Jg8jT/20/

----------------------- 已编辑 -------------- -------------

http://jsfiddle.net/knoxzin1/Jg8jT/29/

现在按照OP的要求工作

于 2013-03-18T17:15:34.593 回答