根據複選框更改href

我寫了一個小腳本，它應該根據活動的複選框更改URL。這裏的'問題'是有特殊情況，當href是'一，二，三'時，變量'one'和'two'有一個逗號，但如果只複選'two'複選框，那麼href也應該只是兩個'沒有逗號。我通過切片功能或多或少地工作。根據複選框更改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); 
    } 
});

來源

2014-04-25 Yunowork

爲什麼不在複選框上設置一些數據並使用javascript連接函數？所有這些條件將不會被需要 – AndreDurao

是你的代碼工作正常嗎？ –

我肯定會帶動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(",")); 
    }); 
});

來源

2014-04-25 17:19:51 talemyn

我可以訪問HTML值，所以確實會更好。非常感謝解決方案！ – Yunowork

樂於幫助。。。很高興它爲你工作。 :) – talemyn

類似的東西... 看到它：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();

來源

2014-04-25 16:53:09 AndreDurao

這是我想出了一個工作的答案 - 你只是由硬件它過於複雜將逗號編碼到字符串中。只要檢查每一個是否被檢查，如果是，檢查是否已經有一個檢查。如果是這樣，請添加一個逗號，然後添加選中的值。只有三個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); 
});

來源

2014-04-25 17:11:01

根據複選框更改href

回答

相關問題