The issue is that my new buttons replace the previous ones. The styles of other inputs that I already had in a version of jquery 1.9.0, I did what the jQueryNoConflict indicates and it did not work for me. Can you help me please. I need the inputs I have in the html to respect the style of jquery 1.11.2. What I have not achieved is that each input has its style.
Then start the code of my buttons that replace the previous ones
Previous inputs
.div_genero input[type="radio"] {
display: none;
}
user agent stylesheet
input[type="radio" i] {
margin: 3px 3px 0px 5px;
}
user agent stylesheet
input[type="radio" i] {
-webkit-appearance: radio;
box-sizing: border-box;
}
user agent stylesheet
input[type="radio" i], input[type="checkbox" i] {
background-color: initial;
cursor: default;
margin: 3px 0.5ex;
padding: initial;
border: initial;
}<div class="div_genero">
<input type="radio" name="genero" value="f" id="radio_genero_f" class="required" title="Indica tu sexo">
<label for="radio_genero_f"><span></span>Femenino</label>
<input type="radio" name="genero" value="m" id="radio_genero_m" class="required" title="Indica tu sexo" checked="checked">
<label for="radio_genero_m"><span></span>Masculino</label>
</div>NEW BUTTONS
<script type="text/javascript">
$(document).ready(function(e) {
$('input').lc_switch('on-string', 'off-string');
// triggered each time a field changes status
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
console.log('field changed status: '+ status );
});
// triggered each time a field is checked
$('body').delegate('.lcs_check', 'lcs-on', function() {
console.log('field is checked');
});
// triggered each time a is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
console.log('field is unchecked');
});
});
</script>@charset "utf-8";
/* CSS Document */
.lcs_wrap {
display: inline-block !important;
direction: ltr !important;
height: 28px !important;
vertical-align: middle !important;
}
.lcs_wrap input {
opacity: 0;
}
.lc_switch{
display: inline-block !important;
position: relative !important;
width: 40px !important;
height: 19px !important;
border-radius: 30px !important;
background-color: white !important;
border: 2px solid #E5E5E5 !important;
cursor: pointer;
-webkit-transition: all .2s ease-in-out !important;
-ms-transition: all .2s ease-in-out !important;
transition: all .2s ease-in-out !important;
}
.lcs_cursor {
display: inline-block !important;
position: absolute !important;
top: -3px !important;
width: 21px !important;
height: 21px !important;
border-radius: 100% !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.1);
z-index: 10 !important;
-webkit-transition: all .2s linear !important;
-ms-transition: all .2s linear !important;
transition: all .2s linear !important;
}
.lcs_label.lcs_label_on {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-size: 16px;
text-decoration-color: aqua;
left: -70px;
z-index: 6;
}
.lcs_label.lcs_label_off {
right: -70px !important;
z-index: 5 !important;
}
/* on
.lcs_switch.lcs_on {
background-image: url(espacio_back.png);
background-repeat: no-repeat;
}*/
.lcs_switch.lcs_on .lcs_cursor {
background-color: #72A84F !important;
top: -4px !important;
left: 23px !important;
border: 3px solid #5D9638 !important;
}
.lcs_switch.lcs_on .lcs_label_on {
left: 10px !important;
opacity: 1 !important;
}
.lcs_switch.lcs_on .lcs_label_on .label {
text-decoration-color: aqua !important;
}
/* off
.lcs_switch.lcs_off {
background-image: url(espacio_back.png);
background-repeat: no-repeat;
} */
.lcs_switch.lcs_off .lcs_cursor {
background-color: #E56161 !important;
top: -4px !important;
left: -13px !important;
border: 3px solid #9E3939 !important;
}
.lcs_switch.lcs_off .lcs_label_off {
right: 10px !important;
}
/* disabled
.lcs_switch.lcs_disabled {
opacity: 0.65;
filter: alpha(opacity=65);
cursor: default;
}*/ <link href="../../../css/lc_switch.css" rel="stylesheet" type="text/css" />
<script src="../../../js/lc_switch.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jQueryAssets/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<form>
<div class="tabla_espacios">
<p> 1
<input <?php if (!(strcmp(1,"1"))) {echo "checked=\"checked\"";} ?> type="radio" name="radio-1" class="lcs_check lcs_tt2"autocomplete="off" value="1" checked="checked" />
</p>
<p>3
<input <?php if (!(strcmp(1,"2"))) {echo "checked=\"checked\"";} ?> type="radio" name="radio-1" value="2" class="lcs_check lcs_tt2" autocomplete="off" />
</p>
<p>3
<input <?php if (!(strcmp(1,"3"))) {echo "checked=\"checked\"";} ?> type="radio" name="radio-1" value="3" class="lcs_check lcs_tt2" autocomplete="off" />
</p>
</div>
</form>