Question

附在HTML＆amp; JS。需要逻辑。

if＆＃39; rt-check - one＆＃39;或者＆＃39; rt-check - one＆amp; RT-检查 - 两个＆＃39;或者＆＃39; rt-check - 一个或rt-check - 三个＆＃39;选中，更改href =＆＃39;＃/ Test1＆＃39;
如果＆＃39; rt-check - 两个＆＃39;或者＆＃39; rt-check - 两个或rt-check - 三个＆＃39;选中，更改href =＆＃39;＃/ Test2＆＃39;
if＆＃39; rt-check - three＆＃39;选中，更改href =＆＃39;＃/ Test3＆＃39;

请根据所需的逻辑给我一个改变href的解决方案。

由于

HTML：

<input type="checkbox" class="js-check" id="rt-check--one" name="rt-check"> Test element 1
<input type="checkbox" class="js-check" id="rt-check--two" name="rt-check"> Test element 2
<input type="checkbox" class="js-check" id="rt-check--three" name="rt-check"> Test element 3

<a tabindex="33" href="#/Test1" class="rt-button js-button--down">Next</a>

JS：

$('#rt-check--one').change(function(){
    if(($('#rt-check--one').is(':checked')) || ($('#rt-check--one').is(':checked') && $('#rt-check--two').is(':checked')) || ($('#rt-check--one').is(':checked') && $('#rt-check--three').is(':checked'))){
        $('a').attr("href", "#/Test1");
    } else{
        $('a').attr("href", "#/Test1");
     }
});

$('#rt-check--two').change(function(){
    if(($('#rt-check--two').is(':checked')) || ($('#rt-check--two').is(':checked') && $('#rt-check--three').is(':checked'))){
        $('a').attr("href", "#/Test2");
    } else{
        $('a').attr("href", "#/Test2");
     }
});

Answer 1

我会做这样的事情：

<input type="checkbox" class="js-check" data-href=""> Test element 1
<input type="checkbox" class="js-check" data-href=""> Test element 2
<input type="checkbox" class="js-check" data-href=""> Test element 3

JS：

    $(".js-check").on("change", function() {
     if ($(this).prop("checked"))
     {
       $("a").attr("href", $(this).data("href"))
     }
    })

Answer 2

您可以将名称更改为rt-check-1，rt-check-2等，并验证是否按此方式进行了检查 - $('input[name="rt-check-1"]:checked')。

Answer 3

正如@Mark所述，您的情况最好是使用data-* attribute。

然后根据第一个href复选框更新:checked：

＆＃13;

$(".js-check").change(function() {
  var href = $(".js-check:checked").first().attr("data-url") || 'Test1';
  $("a").attr('href', href)
        // FOR DEMO:
        .text(href);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="js-check" id="rt-check--one" name="rt-check" data-url="Test1"> Test element 1
<input type="checkbox" class="js-check" id="rt-check--two" name="rt-check" data-url="Test2"> Test element 2
<input type="checkbox" class="js-check" id="rt-check--three" name="rt-check" data-url="Test3"> Test element 3
<p>
  <a tabindex="33" href="#/Test1" class="rt-button js-button--down">Next</a>
</p>

＆＃13;

根据复选框选中更改HREF值

3 个答案: