Jquery attr change structure html
Question
i have jquery in there i want to make my structure of my html change when i click my checkbox for example : when i checked my checkbox my .col-md-4 col-md-push-2 will change to .col-md-6 and when i uncheck it will back to normal
here my jquery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
$(".col-md-4").attr("class", "col-md-6");
$(".col-md-push-2").attr("class", "");
});
});
</script>
and here my view :
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<input type="checkbox" id="try">
in there i can make it change if i check it, but i can't make how to change back again when i uncheck it.
have someone tell me what improvements do i have to make to the code to achieve my goal?
4 answers
solution1
1 2016-07-21 09:37:49
You could toggle these classes, eg:
$(document).ready(function(){
var $colmd2 = $(".col-md-push-2");
$('input[type="checkbox"]').change(function(){
$(".col-md-4, .col-md-6").toggleClass("col-md-4 col-md-6");
$colmd2.toggleClass("col-md-push-2");
});
});
solution2
0 2016-07-21 09:35:13
An alternate option. Use This:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('input[type="checkbox"]').change(function () {
if($(this).is(":checked")){
$(".space").addClass("col-md-6").removeClass("col-md-4 col-md-push-2");
}else{
$(".space").removeClass("col-md-6").addClass("col-md-4 col-md-push-2");
}
});
});
</script>
solution3
0 2016-07-21 09:47:48
i think this is what exactly you are looking for...when checks add col-md-6 when uncheck get back its col-md-4
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[type="checkbox"]').click(function(){ if($(this).prop("checked") == true){ $(".col-md-push-2").addClass("col-md-6"); $(".col-md-push-2").removeClass("col-md-4"); } else if($(this).prop("checked") == false){ $(".col-md-push-2").addClass("col-md-4"); $(".col-md-push-2").removeClass("col-md-6"); } }); }); </script> </head> <body> <div class="col-md-4 col-md-push-2 space business-fields yes box"> </div> <div class="col-md-4 col-md-push-2 space business-fields yes box"> </div> <input type="checkbox" id="try"> </body> </html>
solution4
0 2016-07-21 09:51:14
try this code ..
$('input[type="checkbox"]').click(function () {
if ($('input[type="checkbox"]').prop('checked')) {
$('.col-md-4').addClass('col-md-6').removeClass('col-md-4 col-md-push-2')
}
else {
$('.col-md-6').addClass('col-md-4 col-md-push-2').removeClass('col-md-6')
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.