将值分隔从“,”更改为“-”(JS/Jquery)

Question

我收到了 Jquery 一个 HTML 复选框的代码。本质上，当被选中时，复选框的值被放置在一个输入框中。当我取消选中该框时，该值将从输入中清除。但是，当您选中多个复选框时，一个“,”将值分隔开。 有没有一种方法可以用“-”而不是“,”来分隔值？我试过修改代码，但它只是破坏了代码。我是 JS/Jquery 的新手，所以如果这是一个简单的答案，我深表歉意。如果需要，我可以提供更多信息。带有“,”的有效 JSFiddle 在这里：https://jsfiddle.net/m240Laka/25/

我的代码位于此处：

 var $choiceDisplay = $("#choiceDisplay"), //jquery selector for the display box
    $none = $("#none"),
    $choice = $(".choice");

$choice.on("change", function () {
    var $this = $(this), //jquery selector for the changed input
    isThisChecked = $this.prop("checked"), //boolean true if the box is checked
    choiceSelectionsArray = $choiceDisplay.val().split(",").filter(function(e){return e !== ""}), //array of values that are checked
    isThisValueInDisplayedSelection = $.inArray($this.val(), choiceSelectionsArray) !== -1; //boolean true when $this value displayed

if (isThisChecked) {
    if (isThisValueInDisplayedSelection) {
        return false; //odd, the value is already displayed.  No work to do.
    } else {
        choiceSelectionsArray.push($this.val());
        $choiceDisplay.val(choiceSelectionsArray.join());
    }
} else { //box has been unchecked
    if (isThisValueInDisplayedSelection) {
        choiceSelectionsArray = choiceSelectionsArray.filter(function(e){return e !== $this.val()})
        $choiceDisplay.val(choiceSelectionsArray.join());
    }
}
});

$none.on("change", function () {
   var $this = $(this),
   isThisChecked = $this.prop("checked");
if(isThisChecked){
    $choice.prop({
        disabled: true,
        checked : false
    });
    $choiceDisplay.val("");
}else{
    $choice.prop({disabled: false});
    return false;
}
});

Answer 1

在$.join()中添加分隔符字符串参数：

$choiceDisplay.val(choiceSelectionsArray.join("-"));

更新：

在 $.split() 中添加相同的内容

choiceSelectionsArray = $choiceDisplay.val().split("-")....

Answer 2

在函数join()和split()中，你需要传入你想要的分隔符，'-'。我建议创建一个您使用的局部变量，以便在需要时更容易更改它。

var $choiceDisplay = $("#choiceDisplay"), //jquery selector for the display box
    $none = $("#none"),
    $choice = $(".choice"),
    delimiter = '-';

$choice.on("change", function () {
    var $this = $(this), //jquery selector for the changed input
        isThisChecked = $this.prop("checked"), //boolean true if the box is checked
        choiceSelectionsArray = $choiceDisplay.val().split(delimiter).filter(function(e){return e !== ""}), //array of values that are checked
        isThisValueInDisplayedSelection = $.inArray($this.val(), choiceSelectionsArray) !== -1; //boolean true when $this value displayed

    if (isThisChecked) {
        if (isThisValueInDisplayedSelection) {
            return false; //odd, the value is already displayed.  No work to do.
        } else {
            choiceSelectionsArray.push($this.val());
            $choiceDisplay.val(choiceSelectionsArray.join(delimiter));
        }
    } else { //box has been unchecked
        if (isThisValueInDisplayedSelection) {
            choiceSelectionsArray = choiceSelectionsArray.filter(function(e){return e !== $this.val()})
            $choiceDisplay.val(choiceSelectionsArray.join(delimiter));
        }
    }
});

这是 jsfiddle.

将值分隔从“,”更改为“-”(JS/Jquery)

Changing value separation from "," to "-" (JS/Jquery)

html

javascript

checkbox

jquery