Question

我写了一个小脚本，应根据活动的复选框更改URL。这里的'问题'是有特殊情况，当href是'一，二，三'时，变量'one'和'two'都有一个逗号，但如果只检查复选框'two'，href也应该只是没有逗号就是'两个'。我使用切片功能或多或少地使用它。

有没有更好的方法在函数中编写它并保存x行代码？

DEMO：http://jsfiddle.net/UKD2m/

var one ="111,";
var two ="222,";
var three ="333";

$('body').append('<a href=\"' + one + two + three + '\">link</a>'); //this is the default value

$('.checkbox').change(function() {
  if ($('#one').is(':checked')) { // one only + slice out last character (comma)
    $("a").attr("href", one.slice(0,-1));
  }
  if ($('#one').is(':checked') && $('#two').is(':checked')) { //one and two
    $("a").attr("href", one + two);
  }
  if ($('#one').is(':checked') && $('#three').is(':checked')) { //one and three
    $("a").attr("href", one + three);
  }
  if ($('#two').is(':checked')) { // two only + slice out last charachter (comma)
    $("a").attr("href", two.slice(0,-1));
  }
  if ($('#two').is(':checked') && $('#three').is(':checked')) { // two and three
    $("a").attr("href", two + three);
  }
  if ($('#three').is(':checked')) { // three only
    $("a").attr("href", three);
  }
  if ($('#one').is(':checked') && $('#two').is(':checked') && $('#three').is(':checked')) { // three only
    $("a").attr("href", one + two + three);
  }
});

Answer 1

如果您可以自由选择，我绝对会从复选框选项的href属性中获取value值。首先，您必须设置复选框以使其与值相关联：

<input class="checkbox" id="one" type="checkbox" checked value="111">one<br />
<input class="checkbox" id="two" type="checkbox" checked value="222">two<br />
<input class="checkbox" id="three" type="checkbox" checked value="333">three<br />

如果可能的话，我也会继续默认HTML中的链接：

<a href="111,222,333">link</a>

然后，您可以减少JS，这样，每次更改其中一个复选框时，它将查看该组，确定当前选择的那些，然后将这些选定的值连接到一个字符串中：

$(document).ready(function() {
    $('.checkbox').on("change", function() {
        var aHrefVals = [];

        $('.checkbox').filter(":checked").each(function() {
            aHrefVals.push($(this).val());
        });

        $("a").attr("href", aHrefVals.join(","));
    });
});

Answer 2

这是我提出的一个有效的答案 - 你只需将逗号写入字符串中就可以将其复杂化。只需检查每一个是否被检查，如果是，检查是否已经检查过。如果是这样，请添加逗号，然后添加选中的值。只有三个if语句之后你就会有你的字符串！

var one ="111";
var two ="222";
var three ="333";

$('body').append('<a href=\"' + one + "," + two + "," + three + '\">link</a>'); //this is the default value

$('.checkbox').change(function() {
    var href = "";
    if ($('#one').is(':checked')) {
        href = one;
    }
    if ($('#two').is(':checked')) { 
        href += (href != "") ? "," + two : two;
    }
    if ($('#three').is(':checked')) {
        href += (href != "") ? "," + three : three;
    }
    $("a").attr("href", href);
});

Answer 3

那样的东西...... 见：http://jsfiddle.net/gh64L/3/

function getATxt(){
    var ary = [];
    $("input[type='checkbox']:checked").each( function(){
        ary.push($(this).data("href"));
    });
    $("a#mylink").attr("href", ary.join(","));
}
$('.checkbox').change(function() {
  getATxt();
});
//@ startup
getATxt();

根据复选框更改href

3 个答案: