Question

usual but I need to have different custom radio button images per button.

So Radio1 would have different images to Radio2.

把它放在下面的法典上,但是它却赢得工作,因此我必须做一些错误的事情?

这部法律:

<label for="radio1">
    <img src="radio1_unchecked.png" style="vertical-align:middle" />
    <input name="radiogroup" type="radio" id="radio1" style="display:none;">
</label>

<label for="radio2">
    <img src="radio2_unchecked.png" style="vertical-align:middle" />
    <input name="radiogroup" type="radio" id="radio2" style="display:none;">
</label>

<script>
 $(document).ready(function(){

var radio1checkedImage = "radio1_checked.png",
    radio1uncheckedImage = "radio1_unchecked.png",
    radio2checkedImage = "radio2_checked.png",
    radio2uncheckedImage = "radio2_unchecked.png";

   $( img ).attr("src", radio1uncheckedImage);

$( #radio1, #radio2 ).change(function() {
  var r;

  r = $("#radio1");
  r.prev().attr("src", r[0].checked ? radio1checkedImage : radio1uncheckedImage);

  r = $("#radio2");
  r.prev().attr("src", r[0].checked ? radio2checkedImage : radio2uncheckedImage);

});


});

</script>

Update: Here is the same code as above but without the multiple images. As you can see it works. Can t the code be modified to have multiple images per radio?

Answer 1

此外,我的,其中使用了CSS,让我提出另一种解决办法。

首先,你们想要掌握无线电台的图像。为什么不使用字面物体?

var checkedImages = {
     radio1 : "radio1_checked.png",
     radio2 : "radio2_checked.png"
};
var uncheckedImage = "unchecked.png";

这样,你就能够很容易地提及不同的URL,例如:checkedImages[无线电2]。

The change event handler would look very similar. The only difference is what you do with the checkedLabels and the uncheckedLabels:

var radios = $( input:radio );

radios.change(function() {
    var checkedLabels = radios.filter( :checked ).parent();
    var uncheckedLabels = radios.filter( :not(:checked) ).parent();

    uncheckedLabels.children( img ).attr( src , uncheckedImage);

    checkedLabels.each(function() {
        var image = $(this).children( img );
        var name = $(this).attr( for );

        if (checkedImages[name] !== undefined) {
            // We have checked image for this radio button, so set it:
            image.attr( src , checkedImages[name]);
        } else {
            // We don t have checked image for this radio button.
            image.attr( src , uncheckedImage);
        }
    });
});

主要差异:

We use children() to find the images.
We use each() to add more complicated logic for each of the unchecked label.
We check the selected <label>s for attribute (using .attr( for )) to find out which image we should apply.

举例来说,只有<条码>条形状>国家有不同的射线。如果需要不同的<代码>unchecked 同样,你们也可以轻易应用同样的原则。

www.un.org/Depts/DGACM/index_spanish.htm 活例子:

P.S. don t forget to set the src to the unchecked images (in HTML), or do the following (in JS):

$( input:radio ).change();

这一火焰将<代码>change以方案方式发生,这将造成不可控制的图像应用。

Answer 2

你们可以利用空间安全局确定哪些图像与哪一个无线电台连接。根据对您先前问题的答复:的联合答复,您可使用 Java本添加一个类别名称(例如 查询的)至、/em>(即<label>):

var radios = $( input:radio ); radios.change(function() { radios.filter( :checked ).parent().addClass( checked ); radios.filter( :not(:checked) ).parent().removeClass( checked ); });
因此,现在<代码><label> 如果选用该电台,将有一个<编码>查询的类别,你可以使用安全局作风:

label { /* regular styles */ } label[for="radio1"].checked { /* checked styles for #radio1 s label */ } label[for="radio2"].checked { /* checked styles for #radio2 s label */ }

标签是指你需要使用<条码>背井离乡<>>条码/代码>,这样就知道了。
Live example: http://jsbin.com/ebapov/edit#javascript,html,live

仅举一例,此处是上述《 Java》更确切的版本:

// Fetch the radio buttons (this is a jQuery collection): var radios = $( input:radio ); radios.change(function() { // Filter the radio inputs into checked and unchecked : var checkedInputs = radios.filter( :checked ); var uncheckedInputs = radios.filter( :not(:checked) ); // Get the checked and unchecked labels: var checkedLabels = checkedInputs.parent(); var uncheckedLabels = uncheckedInputs.parent(); // Add the class "checked" to the checked labels: checkedLabels.addClass( checked ); // ... and remove it from the unchecked labels: uncheckedLabels.removeClass( checked ); });

这部法律大部分依据的是,“ j”功能可以是chained。这意味着,当你打电话到0000(,在收集酒类时,将实际退回一份含有原始收集内容的each的母体的藏书。如果你打电话到addClass,则将给这些父母的each增加一个班名。

大部分 j脏功能可以链条。

友情链接