CODEWITHSUNDEEP
javascriptjquery-mobile
user2699714
user2699714

Reputation: 43

Show hide the list by radio button in Jquery Mobile

In the following code, how can I - If I click all, it will show both buy and rent - If I click buy, it will show buy (Rangeslider) only - If I click rent, it will show rent (Rangeslider) only

    <div class="box-filter">
        <!---------------------------------------- Filtering Start ---------------------------------------->
        <ul data-role="listview" data-inset="false"  data-theme="d">
                <li>
                    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <legend></legend>
                        <input name="radio-choice-h-1" id="radio-choice-h-1a" type="radio" checked="checked" value="">
                        <label for="radio-choice-h-1a">All</label>
                        <input name="radio-choice-h-1" id="radio-choice-h-1b" type="radio" value="1">
                        <label for="radio-choice-h-1b">Buy</label>
                        <input name="radio-choice-h-1" id="radio-choice-h-1c" type="radio" value="2">
                        <label for="radio-choice-h-1c">Rent</label>
                    </fieldset>
                </li>
            <!-- Buy Start -->
                <li id="rangeslider_buy">
                    <div data-role="rangeslider" data-mini="true">
                        <label for="range-1a">Buy</label>
                        <input name="range-1a" id="range-1a" min="0" max="2000" value="0" type="range" />
                        <label for="range-1b">Buy</label>
                        <input name="range-1b" id="range-1b" min="0" max="2000" value="2000" type="range" />
                    </div>
                </li>
            <!-- Buy End -->
            <!-- Rent Start -->     
                <li id="rangeslider_rent">
                    <div data-role="rangeslider" data-mini="true">
                        <label for="range-2a">Rent</label>
                        <input name="range-2a" id="range-2a" min="0" max="50000" value="0" type="range" />
                        <label for="range-2b">Rent</label>
                        <input name="range-2b" id="range-2b" min="0" max="50000" value="50000" type="range" />
                    </div>
                </li>
</ul></div>

Upvotes: 0

Views: 283

Answers (3)

balexandre
balexandre

Reputation: 75103

I would prefer not ever have if 's or switch 's and I would like to re-use the code as much as possible, so I would do as:

$(function(){

  $(".radio-selectors input[type='radio']").click(function() {
    // get selected radio area
    var radioType = $(this).attr("data-area");        
    // hide all
    $(".area-all").hide();
    // show correct
    $(".area-" + radioType).show();
  });

});

with JQuery Mobile Suggestions rule about hide and show:

$(function(){

  $(".radio-selectors input[type='radio']").click(function() {
    // get selected radio area
    var radioType = $(this).attr("data-area");        
    // hide all
    $(".area-all").addClass("ui-screen-hidden");
    // show correct
    $(".area-" + radioType).removeClass("ui-screen-hidden");
  });

});

new demo: http://jsbin.com/rokohive/3/edit?html,js,output

and I would append classes to the HTML code as:

<ul ... class="radio-selectors">

<input id="radio-choice-h-1a" data-area="all" ...
<input id="radio-choice-h-1b" data-area="buy" ...
<input id="radio-choice-h-1c" data-area="rent" ...

and

<li id="rangeslider_buy" class="area-buy area-all">
<li id="rangeslider_rent" class="area-rent area-all">

This way, later, you can simply add more radio buttons and more areas and you do not have to change the javascript code:

Demo in JsBin: http://jsbin.com/rokohive/1/edit?html,js,output

Upvotes: 1

Aamir Afridi
Aamir Afridi

Reputation: 6411

Try this http://jsfiddle.net/4f55k/

var $buy = $('#rangeslider_buy'), $rent = $('#rangeslider_rent');

$('#radio-choice-h-1a').click(function () { $buy.add($rent).show() });
$('#radio-choice-h-1b').click(function () { $rent.hide(); $buy.show(); });
$('#radio-choice-h-1c').click(function () { $rent.show(); $buy.hide(); });

Animated: http://jsfiddle.net/4f55k/1/

Upvotes: 0

Omar
Omar

Reputation: 31732

Update

In jQuery Mobile, it is recommended to use class ui-screen-hidden instead of .show()/.hide() functions, in order not to break elements structure. Also, for better results, listview should be refreshed after hiding/showing elements.

Listen to change event fired on type=radio. Give each radio button a value and accordingly show/hide elements.

$(document).on("pageinit", function () {
    $("[type=radio]").on("change", function () {
        if ($(this).is(":checked")) {
            if ($(this).val() == "all") { /* All */
                $("#rangeslider_buy, #rangeslider_rent").removeClass("ui-screen-hidden");

            }
            if ($(this).val() == "buy") { /* Buy */
                $("#rangeslider_buy").removeClass("ui-screen-hidden");
                $("#rangeslider_rent").addClass("ui-screen-hidden");
            }
            if ($(this).val() == "rent") { /* Rent */
                $("#rangeslider_buy").addClass("ui-screen-hidden");
                $("#rangeslider_rent").removeClass("ui-screen-hidden");

            }
            $("listview_ID").listview("refresh");
        }
    });
});

Demo

Upvotes: 2

Related Questions