Jquery атр структура изменения HTML

У меня есть JQuery там я хочу, чтобы сделать мою структуру моего изменения HTML, когда я нажимаю мой checkbox , например: , когда я проверил мой checkbox мой .col-md-4 col-md-push-2 изменится .col-md-6 и когда я снимите его вернется к нормальномуJquery атр структура изменения HTML

здесь мой 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>

и здесь мой взгляд:

<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">

там я могу сделать это изменить, если я проверить это, но я не могу сделать, как изменить обратно, когда я снимите его.

скажите, пожалуйста, какие улучшения я должен внести в код для достижения своей цели?

источник

2016-07-21 Adam Projo

Альтернативный вариант. Использовать этот:

<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>

источник

2016-07-21 09:35:13

его добавить 'Col-MD-6' и не извлекая' Col-мкр-4 цв-MD-кнопочный 2' в моей структуре –

Вы можете переключать эти классы, например:

$(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"); 
    }); 
});

источник

2016-07-21 09:37:49

Оке, но может сделайте это без фальшивого текста. –

уверен, только элементы кеша, обновленный ответ –

спасибо, конечно, его помощь мне сейчас –

я думаю, что это то, что именно вы ищете ... когда чеки добавить COL-MD-6, когда снимите флажок вернуться его 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>

источник

2016-07-21 09:47:48

попробовать этот код ..

$('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') 
     } 
    });

источник

2016-07-21 09:51:14 Karthikeyan

Jquery атр структура изменения HTML

ответ

Смежные вопросы