Checkbox css jquery

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
Застрял на элементарном как казалось.
Есть несколько checkbox’ов

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="div_checkbox">

<input type='checkbox' id='id_1' class='class_checkbox'>
<label for='id_1'></label>
  
<input type='checkbox' id='id_2' class='class_checkbox'>
<label for='id_2'></label>

</div>

И так же для них имеются стили. Хочу сделать переключатель вкл/выкл

#div_checkbox input[type="checkbox"]{
  display: none;
}

#div_checkbox input[type="checkbox"] + label{
  display: block;
  position: relative;
  width:50px;
  border-radius:10px;
  height:22px;
  border:2px solid #f00;
  padding-left: 5px;
  margin: 5px 10px 20px 50px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  float:left;
}

#div_checkbox input[type="checkbox"] + label:last-child{
  margin-bottom: 0;
}

#div_checkbox input[type="checkbox"] + label:before{
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

#div_checkbox input[type="checkbox"]:checked + label:before{
  width: 20px;
  border-radius: 10px;
  opacity: 1;
  margin-left:33px;
}

ну и jquery

jQuery(document).ready(function(){
	$(".class_checkbox").change(function(){ 
    var val = [];
    $.each($(".class_checkbox:checked"),function(i,n){ 
        val[i] = $(n).val();
    })
    
if($("#div_checkbox input[type='checkbox']").is(":checked")) {
$("#div_checkbox input[type='checkbox'] + label").css( "text-align","left");
$("#div_checkbox input[type='checkbox'] + label").text( "Вкл" );
        return true;
    }
if($("#div_checkbox input[type='checkbox']").not(":checked")) {
$("#div_checkbox input[type='checkbox'] + label").css( "text-align","right");
$("#div_checkbox input[type='checkbox'] + label").text( "Выкл" );
    return false;
}
	})
})

Вопрос вот какой как сделать так что бы эти checkbox’ы между собой не как не взаимодеиствовали. Сейчас при включении и выключении у всех checkbox’ов меняется текст. И как подставить нужный текст при загрузке страницы учитывая активен ли checkbox или нет?

#2

Тут CSS хватит

#div_checkbox input[type="checkbox"]:checked + label {
    text-align: left;
}

#div_checkbox input[type="checkbox"]:checked + label:after {
    content: "Вкл";
}


#div_checkbox input[type="checkbox"]:not(:checked) + label {
    text-align: right;
}


#div_checkbox input[type="checkbox"]:not(:checked) + label:after {
    content: "Выкл";
}

https://jsfiddle.net/AlexP11223/z0e9gyv1/19/

#3

Спасибо большое. Я чего то уперся в этот jquery. Всё пора отдыхать уже очевидного не вижу =(

#4

У меня вопрос тут появился
У меня есть несколько checkbox’ов и есть один input. При нажатии на checkbox значения value записываются в input.
Возможно ли сделать так если к примеру я написал в input что то, то при нажатии на checkbox в input не чего не подставляется, а если я к примеру не чего не писал в input то при нажатии на checkbox менялось бы значение value?
Сейчас у меня так

<input type="text" id="test_input">

и jquery

$('.class_checkbox').change(function(){
    $('input[name="' + $(this).attr('name') +'"]').removeAttr('checked');
    $(this).prop('checked', true);
  if($('#test_input').val().length==0)
  $('#test_input').val($(this).val());
});

На ум приходит только сделать скрытое поле и сверять что в одном и другом input написано если совпадает то меняю если нет то оставляем как есть. Но на сколько это правильно …

Вот такой вариант правильный или не очень?

html

<input type="text" id="test_input">
<input type="text" id="test_input_2">

jquery

$('.class_checkbox').change(function(){
    $('input[name="' + $(this).attr('name') +'"]').removeAttr('checked');
    $(this).prop('checked', true);
  
  if($('#test_input').val().length==0 || $('#test_input').val()==$('#test_input_2').val()){
    $('#test_input').val($(this).val());
  }
  $('#test_input_2').val($(this).val());
});
#5

Смотря что значит “написал”.
Например, ловить keydown какой-нибудь (или наверно лучше input/change), менять значение переменной-флага.

#6

Нужно что бы при нажатии на checkbox значение подставлялось в input. Если нажать на другой checkbox значение заменилось и тд. А если я в input что то написал то значение не менялось бы и осталось то что я написал.

#7

Тут есть варианты считать ли “написал и удалил” этим “что-то”, любой ли текст или с какими-то ограничениями и т.д.
Но в любом случае можно это обрабатывать как выше написал.

#8

Всем привет.
Не буду создавать новую тему задам тут свой вопрос.
Есть checkbox’ы … разделим их на две группы
В первой группе всего один checkbox и во второй группе их может быть n-количество. При активации checkbox’a той или другой группы значение должно подставляться в src при чем из первой группы в начале ссылки, а из второй группы в конце.
Так же при деактивации checkbox`ов убиралась только часть к которой принадлежит checkbox. Ну и если checkbox меняется во второй группе то соответственно заменялось бы часть ссылки.

Надеюсь понятно написал.

  <img id="img_src" src="">
<hr>
  <label for="img_src_1_1"><input type="checkbox" id="img_src_1_1">checkbox 1.1</label>
<hr>
  <label for="img_src_2_1"><input type="checkbox" id="img_src_2_1">checkbox 2.1</label>
  <br>
  <label for="img_src_2_2"><input type="checkbox" id="img_src_2_2">checkbox 2.2</label>
  <br>
  <label for="img_src_2_3"><input type="checkbox" id="img_src_2_3">checkbox 2.3</label>

Не могу понять как именно подставлять и убирать ссылки при помощи checkbox’ов

#9

Наверное лучше переписать как здесь: Display image with checkbox

#10

Это как? :thinking:

#11

К примеру есть checkbox (так сказать из первой группы)

<label for="img_src_1_1"><input type="checkbox" id="img_src_1_1">checkbox 1.1</label>

При нажатии на него надо что бы в src подставлялось всегда с левой стороны

нажали мы на checkbox 1.1 и в src добавилось (для примера будет текст “ГРУППА_1”)

<img id="img_src" src="ГРУППА_1">

Так же у меня есть еще checkbox’ы и их может быть разное количество

<label for="img_src_2_1"><input type="checkbox" id="img_src_2_1">checkbox 2.1</label>
  <br>
<label for="img_src_2_2"><input type="checkbox" id="img_src_2_2">checkbox 2.2</label>
  <br>
<label for="img_src_2_3"><input type="checkbox" id="img_src_2_3">checkbox 2.3</label>

и при нажатии на эти checkbox’ы что бы они могли сменять друг друга не затрагивая первую группу и при нажатии на один из этих checkbox’ов значение подставлялось постоянно с правой стороны (для примера будет текст “ГРУППА_2”)

<img id="img_src" src="ГРУППА_1ГРУППА_2">

Соответственно если какую то группу деактивировать то из src та или иная группа удаляется до того момента пока
checkbox снова не будет активен.

#12

Проще не так реализовывать, а просто при любом изменении перегенерировать с нуля значение.
То есть не смотреть где что поменялось, а просто при любом изменении чекбоксов получать текущие значения всех групп (или пустая строка если нет) и объединять их.

Сложность только может быть в том, что надо же еще снимать лишние чекбоксы и т.д. как в предыдущих темах, так что надо чтобы вся эта обработка группы произошла до получения значения (а не в момент когда в группе еще активированы два чекбокса и т.д.).
С настоящими радиобаттонами наверняка была бы проще ))

Частичная замена url