jQueryの+ここのhref要素の横にあるチェックボックスの値を追加

Question

は、私が持っているものです：私は必要なもの

$(function() { 
    $('#find_1 input[type="checkbox"]').change(function() { 
     var $t = $("#t"); 
     if (this.checked) 
      $t.append(($t.text()?",":"")+this.value); 
     else 
      $t.text($t.text().replace(
        new RegExp("\\b"+this.value+"\\b"), "" 
      )); 
    }).change(); 
}); 

は、例えば

#Tターゲットのhrefのチェックボックスの値を書くことです。

選択チェックボックス：

[x]red 

[ ]green 

[x]blue 

は、このようなHREFになるはずである：

<div id"t"><a href"/colors/red,blue">preview colors</a> 

もちろん、ユーザーがチェックボックスをクリック/解除すると、色が追加/削除されます。

ありがとうございました。

Answer 1

私はそれをこのようにします：

$('#find_1 input:checkbox').change(function() { 
    var colours = $("#find_1 input:checkbox:checked").map(function() { 
     return this.value; 
    }).get().join(','); 
    $("#t").find("a").attr('href', '/colors/' + colours); 
}).change(); 

You can try it out here.

Answer 2

をので、あなたには、いくつかのHTMLのような

<div id="find_1"> 
<input type="checkbox" name="red"> 
<input type="checkbox" name="green"> 
</div> 

を持っているとのdivトンのウィッヒは、HREFが含まれており、あなたがしたいですあなたが理解していれば、チェックボックスの変更時にhrefを更新してください。

$(document).ready(function(){ 
    //init, if you start with some colors selected you can add those here 
    //or you can trigger the change event on all checkboxes 
    $('#t').data('colors',[]); 
    //bind change event 
    $('#find_1 input[type="checkbox"]').change(function(){ 
     //get the data from the t div 
     var data = $('#t').data('colors'); 
     //update the data with the new value 
     data[this.data] = this.checked; 
     //save the new data 
     $('#t').data('colors',data); 
     //rebuild the parts form all data wich has true as value 
     var parts = $.map(data,function(el,i){ 
      //map each value in the data array and check for true 
      if (!el) return null; 
     }); 
     //the url is the parts concaternated 
     $('#t a').attr('href','/colors/'+parts.join(',')); 
    }); 
});