CODEWITHSUNDEEP
javascriptjquery
Musterknabe
Musterknabe

Reputation: 6081

Least code to write this with jQuery

normally I'm a backend developer, so I'm not really good with javascript and jQuery. I have 3 radio buttons, and I want to display an image next to the radio button that has been checked. Currently I'm doing it like this with javascript. Every radio button has an onClick method that passes the id as parameter. Then the method does this.

function toggle(id) {
    var e = document.getElementById(id);
    if(e.id == 'rechnung0') {
        document.getElementById('rechnung0').style.cssText= 'display:block;float:right;';
        document.getElementById('rechnung1').style.cssText= 'display:none;float:right;';
        document.getElementById('rechnung2').style.cssText= 'display:none;float:right;';
    }
    if(e.id == 'rechnung1') {
        document.getElementById('rechnung0').style.cssText= 'display:none;float:right;';
        document.getElementById('rechnung1').style.cssText= 'display:block;float:right;';
        document.getElementById('rechnung2').style.cssText= 'display:none;float:right;';
    }
    if(e.id == 'rechnung2') {
        document.getElementById('rechnung0').style.cssText= 'display:none;float:right;';
        document.getElementById('rechnung1').style.cssText= 'display:none;float:right;';
        document.getElementById('rechnung2').style.cssText= 'display:block;float:right;';
    }
}

But there must be a faster way with jQuery. Isn't there one? Like, when one of the radio_buttons gets selected. the name is billingaddress, then everyone of the group which is't selected gets the css with display none, and everyone of the group that is selcted gets the block style.

How is this possible with jquery?

Upvotes: 0

Views: 77

Answers (5)

user2575725
user2575725

Reputation:

If the arrangement is like "radio + img", "radio + img", "radio + img", etc. This can be done with css without js.

css:

input[name=toggleImg]:not(:checked) + img {
    display : none;
}

input[name=toggleImg]:checked + img {
    display : inline;
}

html:

<link rel="stylesheet" href="style.css"/>
<input type="radio" name="toggleImg" />
<img src="img/img (1).jpg"/>
<input type="radio" name="toggleImg" />
<img src="img/img (2).jpg"/>
<input type="radio" name="toggleImg" />
<img src="img/img (3).jpg"/>

Upvotes: 1

Satish Sharma
Satish Sharma

Reputation: 9635

try this

CSS

<style>
    #rechnung0, #rechnung1, #rechnung2{display:none;float:right;}
</style>

JS

function toggle(id) {
    var e = document.getElementById(id);

    document.getElementById('rechnung0').style.display= 'none;';
    document.getElementById('rechnung1').style.display= 'none;';
    document.getElementById('rechnung2').style.display= 'none;';

    if(e.id == 'rechnung0') {
        document.getElementById('rechnung0').style.display= 'block;';
    }
    else if(e.id == 'rechnung1') {
        document.getElementById('rechnung1').style.display= 'block;';
    }
    else if(e.id == 'rechnung2') {
        document.getElementById('rechnung2').style.display= 'block;';
    }

Upvotes: 0

Andrew Brown
Andrew Brown

Reputation: 5424

give all of your radio buttons a similar class, and a data attribute

<input type='radio' class='radio' data-id='1' />
<input type='radio' class='radio' data-id='2' />
<input type='radio' class='radio' data-id='3' />

<img id="1" style="display:none; " />
<img id="2" style="display:none; " />
<img id="3" style="display:none; " />

$(document).ready(function()){
    $(".radio").click(function(){
        var id = $(this).data('id');
        $("#"+id).show();
    });
});

Upvotes: 1

Magnus Engdal
Magnus Engdal

Reputation: 5604

Try this

$(function () {
    $('input:radio').click(function () {
        $('input:radio').not(this).prop('checked', false).next('img').hide();
        $(this).next('img').show();
    });
});

http://jsfiddle.net/349Rx/1/

This assumes that your image is actually an <img> and located close to the radio button in your DOM. Also, it doesn't require the onclick to be set on the radiobuttons.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

function toggle(id) {
    $('#rechnung0,#rechnung1,#rechnung2').css('float', 'right').css('display', function () {
        return this.id == id ? 'block' : 'none'
    })
}

If you can provide more context to the code, we may be able to help you more

Upvotes: 2

Related Questions