附加HTML锚标签，而不是复选框或Javascript复选框

Append HTML with Anchor Tags instead of Checkbox or Checkboxes Javascript

本文关键字：复选框 Javascript HTML 标签 附加      更新时间：2023-09-26

我试图得到一个附加到HTML复选框片段的这个功能的例子，以及锚标记的工作。谢谢!

我已经做了几个月了…

感谢任何可以提供解决方案的人。我已经找了一段时间了

真诚,老肖恩·威赫特:)512-730-1069(如果你愿意，也可以打电话给我，告诉我一个解决办法。)请留言，因为这是我戴着耳机通过gmail使用的谷歌语音号码。我一般不把它打开，除非我需要打电话。

<!-- HEAD STARTS HERE -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        
    <!-- WORKING JAVASCRIPT FOR CHECKBOX TO HTML OUTPUT BELOW -->
    <!-- I NEED TO MAKE THIS ALSO WORK FOR ANCHOR TAGS IS THE QUESTION. -->
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('input[type="checkbox"]').click(function () {
        var title = $(this).closest('.pdt-checkbox').find('.HTML-code-insert').html();
        var tempId = $(this).attr('id');
        // If the checkbox is checked, add the item to the ul.
        if($(this).prop('checked')){
            var html = $("<li/>", {
                title: title,
                idholder: tempId,
                text: title
            });
            $('ul.result').append(html);
        } else {
            // if the checkbox is unchecked, remove the item from the ul.
            $('[idholder="' + tempId + '"]', 'ul').remove();        
        }
    });
    });//]]>  
    $.fn.selectText = function () {
        return $(this).each(function (index, el) {
            if (document.selection) {
                var range = document.body.createTextRange();
                range.moveToElementText(el);
                range.select();
            } else if (window.getSelection) {
                var range = document.createRange();
                range.selectNode(el);
                window.getSelection().addRange(range);
            }
        });
    }
    </script>       
<!-- BODY STARTS HERE -->
<!-- WORKING CHECKBOX SAMPLE BELOW -->
<div class="pdt-checkbox"><input type="checkbox" id="pc-repair-step-one" value="Yes" /><label for="pc-repair-step-one">
1. SMWN</label><div style="display:none;" title="#" class="HTML-code-insert">SMWN</div></div>
<!-- NOT WORKING ANCHOR ATTEMPT BELOW -->
<li class="addmenui"><a class="anchor" onclick="javascript:pcSecurityRepair();" href="#" id="pcsecrepair" value="Yes">PC Security Repair</a><label for="pcsecrepair"></label><div title="#" style="display:none;" class="HTML-code-insert">SMWN</div></li>
<div onclick="$(this).selectText()" style="background:url(button.jpg) 0 0 no repeat"; class="ctrl-a" alt="Click me to select the Notes.">           
<ul style="
font-size: 0px;
margin-left: 5px;
margin-top: 0px;
padding: 20px;
font-family: Calibri, Arial, sans-serif;                                    font-weight: 700;                                           line-height: 24px;
text-shadow: 0px 1px 3px #999959;
" class="result">
</ul>       
</div>

http://api.jquery.com/toggleClass/

你应该使用一些类切换来代替值属性

$('a.anchor').click(function () {
        $(this).toggleClass('clicked');
        var title = $(this).parent().find('.HTML-code-insert').html();
        var tempId = $(this).attr('id');
        // If the anchor is clicked, add the item to the ul.
        if ($(this).hasClass('clicked')){
            var html = $("<li/>", {
                title: title,
                idholder: tempId,
                text: title
            });
            $('ul.result').append(html);
        } else {
            // if the anchor is not clicked, remove the item from the ul.
            $('[idholder="' + tempId + '"]', 'ul').remove();        
        }

您可以尝试这样做…

//content to be inserted
var listItem1 = $('<li>').text('My List Item 1').attr('id', 'listItem1');
var listItem2 = $('<li>').text('My List Item 2').attr('id', 'listItem2');
//reference to target ul
var targetUL = $('#result'); // reference to the result <ul>
//click event for checkbox
$("#pc-repair-step-one").on('click', function () {
    if (this.checked) targetUL.append(listItem1); //checkbox is checked add the item
    else $('#listItem1').remove(); // checkbox is not checked remove the item
});
//click event for anchor
$('#pc-repair-step-two').on('click', function () {
    var listItem = $('#listItem2'); // reference to listItem
    if(listItem.length === 1) listItem.remove(); //item exits remove it
    else targetUL.append(listItem2); // item doesnt exist add it
});

我所做的是检查复选框的状态或在链接的情况下插入元素的存在…并从

中添加或删除它

这里是这个想法工作的小提琴…希望这能帮到你http://jsfiddle.net/pixelchemist/LL5QU/

相关文章：