Удалите входное значение jquery

Question

каждый раз, когда я нажимаю на параметр, его тип данных должен появиться на входе.

Но я хочу, чтобы значение уже в .val ввода больше не отображалось, и если я дважды щелкаю, я хочу удалить тип данных из ввода.

Вот мой Jsfiddle:

$('.checkbox').on('click', function() { 
     var type = $(this).data('type'), 
       answer = $('.answer'), 
       initial = $('.answer').val(); 

     $(this).toggleClass('checked'); 

     if (answer.val().length === 0) { 
      answer.val(type); 
     } else { 
      answer.val(initial + ',' + type); 
     } 


    }); 

http://jsfiddle.net/xbwocrf3/

Спасибо!

Answer 1

Одно из решений с помощью Jquery карты:

$('.checkbox').on('click', function() { 
 
    $(this).toggleClass('checked'); 
 
    //save the values of checked in an array 
 
    var answerValues = $(".checkbox.checked").map(function() { 
 
    return $(this).data("type"); 
 
    }).get(); 
 

 
    //update input text with this values 
 
    $(".answer").val(answerValues); 
 
});

.checkbox.checked { 
 
    border: 2px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="answer" /> 
 

 
<div class="checkbox" data-type="1">Option #1</div> 
 
<div class="checkbox" data-type="2">Option #2</div> 
 
<div class="checkbox" data-type="3">Option #3</div> 
 
<div class="checkbox" data-type="4">Option #4</div>

Answer 2

please check fiddle

$('.checkbox').on('click', function() { 

    $(this).toggleClass('checked'); 

    var typen = ''; 
    $(".checkbox").each(function() { 
     var type = $(this).data('type'); 
     if ($(this).hasClass('checkbox checked')) { 
      typen = typen + ',' + type; 
     } 

    }); 

    if (typen.length > 0) { 
     typen = typen.substring(1, typen.length); 
    } 

    $('.answer').val(typen); 

}); 

Answer 3

ли еще проверить, прежде чем добавить значение здесь:

$('.checkbox').on('click', function() { 
 
    var type = $(this).data('type'), 
 
     answer = $('.answer'), 
 
     initial = $('.answer').val(); 
 

 
    $(this).toggleClass('checked'); 
 

 
    if (answer.val().length === 0) { 
 
     answer.val(type); 
 
    } else if (!new RegExp("\,?" + type + "\,?").test(initial)) { 
 
     answer.val(initial + ',' + type); 
 
    } 
 
});

.checkbox.checked { 
 
    border:2px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="answer" /> 
 
<div class="checkbox" data-type="1">Option #1</div> 
 
<div class="checkbox" data-type="2">Option #2</div> 
 
<div class="checkbox" data-type="3">Option #3</div> 
 
<div class="checkbox" data-type="4">Option #4</div>

Answer 4

Проверьте, если вход имеет checked класс:

if($(this).hasClass('checked')) 
     return; 

Окончательных:

$('.checkbox').on('click', function() { 
    if($(this).hasClass('checked')) 
     return;//Stop the execution of the function 

    var type = $(this).data('type'), 
     answer = $('.answer'), 
     initial = $('.answer').val(); 

    $(this).toggleClass('checked'); 

    if(answer.val().length === 0) { 
     answer.val(type); 
    } else { 
     answer.val(initial +','+ type);     
    } 

}); 

Answer 5

функции карты Использовать JQuery, чтобы получить данные типа из всех элементов. Затем используйте функцию соединения.

http://jsfiddle.net/xbwocrf3/8/

$('.checkbox').on('click', function() { 
    var answer = $('.answer'); 
    $(this).toggleClass('checked'); 
    answer.val($(".checkbox.checked").map(function() {return $(this).data("type")}).get().join(", ")); 
}); 

Answer 6

Это решение является немного чище:

http://jsfiddle.net/xbwocrf3/9/(ссылка обновлена, я вставил его неправильно перед)

• Он использует собственные флажков
• Вместо этого делать что-то так же сложно, как пытаться удалить г значения, он переписывает всю стоимость входа с нуля
• Элементы всегда появляются в их естественном порядке

HTML

<input type="text" class="answer" /> 

<div> 
<input type="checkbox" value="1" name="something" id="something1"/> 
<label for="something1">Option #1</label> 
</div> 

<div> 
    <input type="checkbox" value="2" name="something" id="something2"/> 
    <label for="something2">Option #2</label> 
</div> 

<div> 
    <input type="checkbox" value="3" name="something" id="something3"/> 
    <label for="something3">Option #3</label> 
</div> 

<div> 
    <input type="checkbox" value="4" name="something" id="something4"/> 
    <label for="something4">Option #4</label> 
</div> 

CSS

input[type="checkbox"]{ 
    display: none; 
} 
input[type="checkbox"]:checked + label{ 
    border:2px solid green; 
} 

Javascript

$('input[type=checkbox]').on('change', function() { 
    var $answer = $(".answer"); 

    var checked_values = $.map($("input:checked"), function (element){ 
     return element.value; 
    }); 

    $answer.val(checked_values);  
});