CODEWITHSUNDEEP
javascriptjqueryhtml
user1683781
user1683781

Reputation: 13

2 checkbox when both check provide new div

I have three div when I want to use checkbox should I have new div if I check car1 while car2 unchecked should I have red car but if check car1 while car2 checked should I have black car

<div id="carblack">
    car black
</div>
<div id="carred"  style="display:none">
    car red
</div>
<div id="carblue"  style="display:none">
    car blue
</div>
<input type="checkbox" id="car1" name="vehicle" value="red" checked/>
<input type="checkbox" id="car2" name="vehicle1" value="blue"  checked/>

$('#car1').change(function () {

    if($(this).attr("checked")){
        document.getElementById("carred").style.display = "block";
        document.getElementById("carblack").style.display = "none";
    } else{
        document.getElementById("carblack").style.display = "block";
        document.getElementById("carred").style.display = "none";
    }
});

$('#car2').change(function () {

    if($(this).attr("checked")){
        document.getElementById("carblue").style.display = "block";
        document.getElementById("carblack").style.display = "none";
    } else{
        document.getElementById("carblack").style.display = "block"; 
        document.getElementById("carblue").style.display = "none";
    }
});

Upvotes: 1

Views: 109

Answers (2)

Afshin
Afshin

Reputation: 4215

$('#car1').change(function () {

if($(this).attr("checked")){
    if($(this).next().attr("checked")){
    document.getElementById("carblack").style.display = "block";
    document.getElementById("carred").style.display = "none";
     document.getElementById("carblue").style.display = "none";
    }else{
    document.getElementById("carred").style.display = "block";
    document.getElementById("carblack").style.display = "none";
}
} else if($(this).next().attr("checked")){
    document.getElementById("carblack").style.display = "none";
    document.getElementById("carblue").style.display = "block";
}else{
       document.getElementById("carblack").style.display = "block";
    document.getElementById("carred").style.display = "none";
     document.getElementById("carblue").style.display = "none";        }
});

$('#car2').change(function () {

if($(this).attr("checked")){
     if($(this).prev().attr("checked")){
     document.getElementById("carblack").style.display = "block";
     document.getElementById("carred").style.display = "none";
     document.getElementById("carblue").style.display = "none";

    }else{
    document.getElementById("carblue").style.display = "block";
    document.getElementById("carblack").style.display = "none";
    }
 } else if($(this).prev().attr("checked")){
    document.getElementById("carblack").style.display = "none"; 
    document.getElementById("carred").style.display = "block";
 }else{
       document.getElementById("carblack").style.display = "block";
    document.getElementById("carred").style.display = "none";
     document.getElementById("carblue").style.display = "none";        }
});​

Upvotes: 0

webdeveloper
webdeveloper

Reputation: 17288

2 radio checked or none of them - black?

$(function(){
    var cars = $('div[id^="car"]'),
        inputs = $('input[type="checkbox"]');

    inputs.change(function(){
        cars.hide();
        if(inputs.filter(':checked').length === 1)
        {
           cars.filter('#car' + $(this).val()).show();
        }
        else {
           cars.filter('#carblack').show();
        }
    });
});

Demo: http://jsfiddle.net/jAxHT/

Upvotes: 1

Related Questions