JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div id="div1"><div>
    <input type="checkbox" value="A" id="A"/><label for="A">A</label><input type="text" value=""></input><BR/>
    <input type="checkbox" value="B" id="B"/><label for="B">B</label><input type="text" value=""></input><BR/>
    <input type="checkbox" value="C" id="C"/><label for="C">C</label><input type="text" value=""></input><BR/>
    
</div>
<label >結果：</label><input id="result" type="text" value=""></input>
</div>
<div id="div2"><div>
    <input type="checkbox" value="A" id="A"/><label for="A" id="AL">A</label><input type="text" value="" id="AT"></input><BR/>
    <input type="checkbox" value="B" id="B"/><label for="B" id="BL">B</label><input type="text" value="" id="BT"></input><BR/>
    <input type="checkbox" value="C" id="C"/><label for="C" id="CL">C</label><input type="text" value="" id="CT"></input><BR/>
    
</div>
<label >結果：</label><input id="result" type="text" value=""></input>
</div>

CSS

#result{width:300px}
#div1,#div2{border:1px #ccc solid; margin:5px;}
input {margin:5px;}
:disabled{background:silver}

JavaScript

/*jQuery 物件Value與分隔符號操作測試*/
var result = "";
/*類別一*/
$('#div1 input').on("keyup cheng click",function(){   
    var $inputlist = $(this).parent().find("input");
    $inputlist.each(function(){
        $this = $(this);
        if ($this.attr("type")=="checkbox" && $this.attr("checked")){
            result += $this.val()+"、";
        }else if($this.attr("type")=="text" && $this.val().length > 0){
            result += $this.val()+"、";
        }
    });
    if (result.lastIndexOf("、")==result.length-1 && result.length > 0)
    {
        result = result.substring(0,result.length-1)
    }
    $('#div1 #result').val(result);
    result="";
});

/*類別二*/
$('#div2 > div input').filter("[type='text']").attr('disabled', 'true').end()
.on("keyup cheng click",function(){   
    var $checkboxlist = $(this).parent().find("[type='checkbox']");    
    $checkboxlist.each(function(){
        $this = $(this);
        $nextinput = $this.nextAll("input[type='text']:eq(0)");
        if($this.attr("checked")){
            result += $this.val();            
            $nextinput.removeAttr("disabled");
            if ($nextinput.attr("type")=="text" && $nextinput.val().length>0){
                result += "："+$nextinput.val()+"、";                
            }else{result += "、";}
        }else{
            $nextinput.val("").attr("disabled","true");
        }
    });
    if (result.lastIndexOf("、")==result.length-1 && result.length > 0)
    {
        result = result.substring(0,result.length-1)
    }
    $('#div2 #result').val(result);
    result="";
});