我有以下 jquery 代码,如果复选框未选中,我想从文本字段中删除值,如果选中,则添加。
最初,所有值都作为
^
分隔符出现在文本框中。并选中所有复选框
这是 y 段代码:
$(document).on('change','._invoice',function() {
var mystr = $(this).attr('data-id').is(":checked");
if(mystr) {
var returnVal = confirm("Are you sure?");
$(this).attr("checked", returnVal);
}
});
});
文本字段值,我还想删除分隔符并在最后添加名称,
^
作为分隔符。
Robert Berenson^Nancy Foster^Richard Gourhan^LORI HEDMAN^Pui Hoang^Linda Lee^Kristen McDonald^Matthew Miller^Tricia Roland^Terry West
一个简单的方法是在复选框更改事件上更改文本框的文本。然后意味着您需要获取每个选中复选框的文本并将其设置为文本框,当任何复选框发生更改时。
$(".check").change(function(){
var text = "";
$(".check:checked").each(function(){
text += text != "" ? "^" : "";
if ($(this).prop("checked"))
text += $(this).val();
});
$(".text").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" value="Text1" />
<input type="checkbox" class="check" value="Text2" />
<input type="checkbox" class="check" value="Text3" />
<input type="checkbox" class="check" value="Text4" />
<input type="checkbox" class="check" value="Text5" />
<br/>
<input type="text" class="text" />
var txt = document.getElementById( 'droptxt' ),
content = document.getElementById( 'content' ),
list = document.querySelectorAll( '.content input[type="checkbox"]' ),
quantity = document.querySelectorAll( '.quantity' );
txt.addEventListener( 'click', function() {
content.classList.toggle( 'show' )
} )
window.onclick = function( e ) {
if ( !e.target.matches( '.list' ) ) {
if ( content.classList.contains( 'show' ) ) content.classList.remove( 'show' )
}
}
list.forEach( function( item, index ) {
item.addEventListener( 'click', function() {
calc()
} )
} )
function calc() {
for ( var i = 0, arr = []; i < list.length; i++ ) {
let spanArray = [];
document.querySelectorAll('span').forEach(element => {
spanArray.push(element.innerHTML);
});
if ( list[ i ].checked ) arr.push( list[ i ].value + " "+ spanArray)
}
txt.value = arr.join(', ')
}
h1 {
color: #0000ff;
}
#droptxt {
padding: 8px;
width: 300px;
cursor: pointer;
box-sizing: border-box
}
.dropdown {
position: relative;
display: inline-block
}
.content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
overflow: auto;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
z-index: 1
}
.content div {
padding: 10px 15px
}
.content div:hover {
background-color: #ddd
}
.show {
display: block
}
<h1>KIAAT</h1>
<b>Adding/Removing Checkbox Values into TextArea</b>
<br><br>
<input type="text" id="droptxt" class="list" placeholder="Select the values" readonly>
<div id="content" class="content">
<div id="market" class="list">
<label><input type="checkbox" id="market" class="list" value="apple" /> Apple</label>
</div>
<div class="list">
<label><input type="checkbox" id="banana" class="list" value="Banana" /> Banana</label>
</div>
<div class="list">
<label><input type="checkbox" id="pineapple" class="list" value="Pineapple" /> Pineapple</label>
</div>
</div>